Aligning div inside a div with Label?

Aligning div inside a div with Label? - javascript

I have below html code.
HTML
<label for="payment" class="headerAtt">Pay:</label>
<div class="chckValueWrap">
<div class="left">
<input type="checkbox" name="chk_group" value="value1" />Visa<br />
<input type="checkbox" name="chk_group" value="value2" />Master Card <br />
<input type="checkbox" name="chk_group" value="value3" />American Express<br />
<input type="checkbox" name="chk_group" value="value3" />Care Credit<br />
<input type="checkbox" name="chk_group" value="value1" />Discover</div>
<div class="right"><input type="checkbox" name="chk_group" value="value2" />Cash ONLY<br />
<input type="checkbox" name="chk_group" value="value3" />Personal Check<br />
<input type="checkbox" name="chk_group" value="value3" />PayPal <br />
<input type="checkbox" name="chk_group" value="value3" />No Cash Accepted<br />
<input type="checkbox" name="chk_group" value="value3" />Others
</div>
</div>
CSS:
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
.chckValueWrap{
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
}
.left{
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
Here everything is working fine except the label. how can i align align label and div horizontally as a single Line?
Thanks!

Try changing margin of .chckValueWrap to -23px 0 0 42px;
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
.chckValueWrap{
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: -23px 0 0 42px;
padding: 1%;
height: 100px;
}
.left{
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}

Check this
What I did is:
Put the label and div inside an outer div with class outerWrap. And gave that div padding.
Removed padding from chckValueWrap class css.
.outerWrap {
background-color: #FFFFFF;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
}
.chckValueWrap {
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
height: 100px;
}
Hope it helps.

You are giving 80% to the outer width and giving 40% each to right and left div inside it. Width attribute represents the content width only. So giving 40% to both will collide their border and both will not come correct. You need to slightly decrease width of one while playing with float.You need make it work with following CSS changes:
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
float:left;
}
.left{
width: 39%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
Fiddle: http://jsfiddle.net/9E4q7/4/

Try this: Demo at: http://jsfiddle.net/7EPRJ/2/
Your HTML remain the same. Just some tweaks to the css
Your label width may be the issue.
.headerAtt {
padding-right: 5px;
padding-bottom: 10px;
min-width: 20px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
float:left;
}
.chckValueWrap {
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
float:left;
overflow:hidden;
}
.left {
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}

Related

My site breaks at 760px. How can I fix it?

window.onload = function(){
const pattern = trianglify({
width: window.innerWidth,
height: window.innerHeight,
cellSize: 75,
xColors: 'Blues',
yColors: 'match',
variance: 0.75,
fill: true,
})
document.getElementById('background').appendChild(pattern.toCanvas())
/* Customization
width: 600,
height: 400,
cellSize: 75,
variance: 0.75,
seed: null,
xColors: 'random',
yColors: 'match',
fill: true,
palette: trianglify.colorbrewer,
colorSpace: 'lab',
colorFunction: trianglify.colorFunctions.interpolateLinear(0.5),
strokeWidth: 0,
points: null
}
*/
let ageInput = document.querySelector('#ageInput');
let heightInput = document.querySelector('#heightInput');
let weightInput = document.querySelector('#weightInput');
let extremeWeightGain = document.getElementById('extremeWeightGain')
let averageWeightGain = document.getElementById('averageWeightGain')
let mildWeightGain = document.getElementById('mildWeightGain')
let mildWeightLoss = document.getElementById('mildWeightLoss')
let averageWeightLoss = document.getElementById('averageWeightLoss')
let extremeWeightLoss = document.getElementById('extremeWeightLoss')
let btnAdd = document.querySelector('button');
let maintainCalories = document.getElementById('maintainCalories');
const selectElement = document.getElementById('exerciseInput')
let exerciseValue = {
price: 0
}
selectElement.addEventListener("change", function(e) {
const inputValue = e.target.value;
if (inputValue == 'noExercise') {
exerciseValue.price = -150;
}
if (inputValue == 'lightExercise') {
exerciseValue.price = -50;
}
if (inputValue == 'moderateExercise') {
exerciseValue.price = 100;
}
if (inputValue == 'activeExercise') {
exerciseValue.price = 250;
}
if (inputValue == 'veryActiveExercise') {
exerciseValue.price = 375;
}
if (inputValue == 'extraActiveExercise') {
exerciseValue.price = 500;
}
})
btnAdd.addEventListener('click', () =>{
let zyzz = parseFloat(weightInput.value*10) + parseFloat(heightInput.value*6.25) -
parseFloat(ageInput.value*5) + parseInt(genderValue.price) + parseInt(exerciseValue.price);
maintainCalories.innerText = zyzz.toFixed(0);
extremeWeightGain.innerText = zyzz *100 /71;
averageWeightGain.innerText = zyzz *100 /81;
mildWeightGain.innerText = zyzz *100 /89;
mildWeightLoss.innerText = zyzz *88 /100;
averageWeightLoss.innerText = zyzz *76 /100;
extremeWeightLoss.innerText = zyzz *66 /100;
extremeWeightGain.innerHTML = Math.round(extremeWeightGain.innerHTML *1);
averageWeightGain.innerHTML = Math.round(averageWeightGain.innerHTML *1);
mildWeightGain.innerHTML = Math.round(mildWeightGain.innerHTML *1);
mildWeightLoss.innerHTML = Math.round(mildWeightLoss.innerHTML *1);
averageWeightLoss.innerHTML = Math.round(averageWeightLoss.innerHTML *1);
extremeWeightLoss.innerHTML = Math.round(extremeWeightLoss.innerHTML *1);
});
var genderValue = {
price: 0
}
var maleValue = document.getElementById('Male');
Male.addEventListener('click' ,function(){
genderValue.price = 5;
})
var femaleValue = document.getElementById('Female');
Female.addEventListener('click' ,function(){
genderValue.price = -161;
})
}
function showResults() {
document.getElementById("input1").style.display="none";
document.getElementById("input2").style.display="none";
document.getElementById("input3").style.display="none";
document.getElementById("input4").style.display="none";
document.getElementById("input5").style.display="none";
document.getElementById("input6").style.display="none";
document.getElementById('hideButton').style.display = "none";
document.getElementById("resultsSection").style.display="block";
}
.main-section {
padding-top: 79px;
padding-left: 500px;
width: 903px;
font-family: 'Anton', sans-serif;
display: block;}
.background {
position: sticky;
overflow: hidden;}
.wholeArea {
position: absolute;
top: 0;
right: 0;}
.title {
font-size: 60px;
color: #132c54;}
.description {
font-size: 25px;
color: #2569c8;
line-height: 29px;
margin-bottom: 8px;}
.inputText {
font-size: 30px;
color: #132c54;
background-color: white;}
.inputField {
font-size: 30px;
color: #132c54;
border-color: #132c54;
border-width: 4px;
border-style: solid;
outline-color: #132c54;
border-radius: 6px;}
.noDecoration { /* No Text Decoration */
text-decoration: none;
color: #132c54;}
.selectInput {
width: 413px;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;}
.textInput {
width: 400px;
display: inline;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
padding-left: 3px;}
.selectOption {
font-size: 30px;
color: #132c54;}
.buttonStyle {
font-size: 35px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;}
.radioStyle {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: top;}
.leftColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;}
.leftColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;}
.rightColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;}
.rightColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;}
.leftColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 100px;
float: left;
position: fixed;
display: inline;
top: 0px;
left: 0px;}
.rightColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 400px;
float: left;
position: fixed;
display: inline;
top: 0px;
right: 0px;}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 300px;
height: auto;}
.resultsSection {
display: none;}
.radioArea {
height: 45px;
width: 700px;
display: block;}
.inputArea {
height: 50px;
width: 700px;
display: block;}
.labelText {
width: 150px;
display: inline-block;}
.resultsText {
line-height: 40px;
padding: 0px;
border: 0px;
margin: 0px;}
.hideInput {
display: block;}
.mainBorder {
border: 20px solid white;
border-radius: 12px;
background-color: white;}
.titleBorder {
border: 20px solid white;
border-bottom: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: white;}
.descBorder {
border: 20px solid white;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
background-color: white;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
#media screen and (max-width: 780px) {
.main-section {
padding-top: 64px;
padding-left: 10%;
padding-right: 0px;
width: 80%;
}
.leftColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 85px;
margin-right: 30px;
float: left;
position: static;
display: block;
width: 30%;
}
.rightColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 70px;
margin-right: 0px;
float: left;
position: fixed;
position: static;
display: block;
width: 30%;
}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 240px;
height: auto;
}
.leftColumnBox2 {
display: none;
}
.rightColumnBox2 {
display: none;
}
.textInput {
width: 350px;
}
.selectInput {
width: 363px;
}
.title {
font-size: 40px;
}
.description {
font-size: 18px;
}
.labelText {
width: 150px;
}}
#media screen and (max-width: 760px) {
.main-section {
padding-top: 64px;
padding-left: 11%;
padding-right: 0px;
width: 80%;
}
.leftColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 88px;
margin-right: 30px;
float: left;
position: static;
display: block;
width: 30%;
}
.rightColumn {
width: 240px;
height: auto;
margin-top: 41px;
margin-left: 70px;
margin-right: 0px;
float: left;
position: fixed;
position: static;
display: block;
width: 30%;
}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 240px;
height: auto;
}
.leftColumnBox2 {
display: none;
}
.rightColumnBox2 {
display: none;
}
.textInput {
width: 350px;
}
.selectInput {
width: 363px;
}
.title {
font-size: 40px;
}
.description {
font-size: 18px;
}
.labelText {
width: 150px;
}}
.banner { /* Banner Styles */
width: 100%;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
float: left;
text-decoration: none;
cursor: pointer;}
html, body {
max-width: 100%;
overflow-x: hidden;}
.noselect { /* No Highlighting */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */}
.banner-head-1 { /* Home Header */
float: left;
overflow-wrap: normal;
margin-left: 200px;
margin-right: 200px;
text-decoration: none;
color: black;
display:block;}
.banner-head-2 { /* Food Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.banner-head-3 { /* Exercise Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.banner-head-4 { /* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.banner-head-5 { /* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display:block;}
.dropdown { /* Dropdown Content */
cursor: pointer;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
display:none;
position:absolute;
width: 100%;
float: left;
text-decoration: none;
padding-right: 80px;
margin: 0px;
border: 0px;}
.noDecoration { /* No Text Decoration */
text-decoration: none;
color: black;}
.dropdown-content {
display: none;
padding-left: 20px;}
.banner-logo {
height: 40px;
border: 10px solid white;
border-radius: 12px;
margin-top: 5px;}
.banner-logo-responsive {
margin-left: 150px;
height: 43px;
margin-top: 5px;
margin-bottom: 5px;
border: 10px solid white;
border-radius: 12px;
margin-left: 350px;}
.mobile-logo {
height: 80px;
padding: none;
border: 10px white solid;
border-radius: 8px;}
#media screen and (max-width: 780px) {
.banner-head-1 { /* Home Header */
margin-left: 6px;
margin-right: 10px;
}
.banner-head-2 { /* Food Header */
margin-left: 15px;
}
.banner-head-3 { /* Exercise Header */
margin-left: 15px;
}
.banner-head-4 { /* Calculators Header */
margin-left: 15px;
}
.banner-head-5 { /* Calculators Header */
margin-left: 15px;
}
.banner-logo {
height: 22px;
}}
#media screen and (max-width: 760px) {
.banner-head-1 { /* Home Header */
margin-left: 10px;
margin-right: 10px;
}
.banner-head-2 { /* Food Header */
margin-left: 15px;
}
.banner-head-3 { /* Exercise Header */
margin-left: 15px;
}
.banner-head-4 { /* Calculators Header */
margin-left: 15px;
}
.banner-head-5 { /* Calculators Header */
margin-left: 15px;
}
.banner-logo {
height: 21px;
}}
<div class="mainBorder calculatorSection" id="inputSection"> <!-- Calculator -->
<div class="radioArea" style="padding-bottom: 5px;" id="input1">
<label class="inputText noDecoration labelText">Units</label>
<a href="./calorie-calculator.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator.html'">
<label class="inputText noDecoration">Metric</label>
</a>
<a href="./calorie-calculator-imperial.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial.html'">
<label class="inputText noDecoration">Imperial</label><br>
</a>
</div>
<div class="radioArea" id="input2">
<label for="gender" class="inputText labelText">Gender</label>
<input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle">
<label for="Male" class="inputText">Male</label>
<input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle">
<label for="Female" class="inputText">Female</label><br>
</div>
<div class="inputArea" id="input3">
<label for="ageInput" class="inputText labelText">Age</label>
<input type="number" id="ageInput" class="inputField textInput" placeholder="12-80"><br>
</div>
<div class="inputArea" id="input4">
<label for="heightInput" class="inputText labelText">Height</label>
<input type="number" id="heightInput" class="inputField textInput" placeholder="100cm - 200cm"><br>
</div>
<div class="inputArea" id="input5">
<label for="weightInput"class="inputText labelText">Weight</label>
<input type="number" id="weightInput" class="inputField textInput" placeholder="30kg - 120kg"><br>
</div>
<div class="inputArea" id="input6">
<label for="exerciseInput"class="inputText labelText">Exercise</label>
<select id="exerciseInput" class="inputText selectInput">
<option class="inputText selectOption">Exercise</option>
<option value="noExercise" id="noExercise" class="inputText selectOption">Inactive</option>
<option value="lightExercise" id="lightExercise" class="inputText selectOption">Light Activity</option>
<option value="moderateExercise" id="moderateExercise" class="inputText selectOption">Moderate Activity</option>
<option value="activeExercise" id="activeExercise" class="inputText selectOption">Active</option>
<option value="veryActiveExercise" id="veryActiveExercise" class="inputText selectOption">Very Active</option>
<option value="extraActiveExercise" id="extraActiveExercise" class="inputText selectOption">Extra Active</option>
</select><br>
</div>
<button class="buttonStyle" onclick="showResults();" id="hideButton">ADD</button>
<span class="resultsSection" id="resultsSection">
<div class="inputText resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeWeightGain" class="inputText"></span></div>
<div class="inputText resultsText">Weight Gain(0.5kg/week) - <span id="averageWeightGain" class="inputText"></span></div>
<div class="inputText resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildWeightGain" class="inputText"></span></div>
<div class="inputText resultsText">Maintain Calories - <span id="maintainCalories" class="inputText"></span></div>
<div class="inputText resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildWeightLoss" class="inputText"></span></div>
<div class="inputText resultsText">Weight Loss(0.5kg/week) - <span id="averageWeightLoss" class="inputText"></span></div>
<div class="inputText resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeWeightLoss" class="inputText"></span></div>
</span>
</div>
Hi there,
I am trying to make my site responsive but it stops working at 760px. When it his 760px everything else gets moved and out of place. The problem happens when I click on a button to hide the input section and display the answers. Nothing is displaced on the button press for 760px+. The code is very similar at each code break and I can't find the issue.
Here is what it looks like before the button press:img-1
Here is what it looks like after the button pressimg-2

I guess, you have radioArea width set to 700px, maybe that's why? Width of your class are fixed, you have to change it according to screen width, if you want to make a responsive design
For example you can use width in percents, not in fixed pixels, but add max-width property, as you do not want to have it more than 700px

When I hide an element and show another one, other divs move. How to stop this?

I have made a page with a div that gets replaced by a different div when a button is clicked. Both of them have similar properties but when I click the button some other elements move. For some reason, when the div that replaces the first div's height is smaller than the page height, no other divs are moved, but when the div height is larger than the page, it does move other elements
Nothing moves when the middle section fits on the page:
I will show you what I mean here:
When the middle section doesn't fit on the page some elements are moved left:
Please open in full screen to see:
function showResults() {
document.getElementById("inputSection").style.display = "none";
document.getElementById('hideButton').style.display = "none";
document.getElementById("Calories").style.display = "block";
document.getElementById("Protein").style.display = "block";
document.getElementById("Carbs").style.display = "block";
}
#import "calorie-calculator.css";
.banner {
/* Banner Styles */
width: 100%;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
float: left;
text-decoration: none;
cursor: pointer;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.noselect {
/* No Highlighting */
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.banner-head-1 {
/* Home Header */
float: left;
overflow-wrap: normal;
margin-left: 200px;
margin-right: 200px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-2 {
/* Food Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-3 {
/* Exercise Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-4 {
/* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.banner-head-5 {
/* Calculators Header */
float: left;
overflow-wrap: normal;
margin-left: 55px;
text-decoration: none;
color: black;
display: block;
}
.dropdown {
/* Dropdown Content */
cursor: pointer;
color: black;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 24px;
display: none;
position: absolute;
width: 100%;
float: left;
text-decoration: none;
padding-right: 80px;
margin: 0px;
border: 0px;
}
.noDecoration {
/* No Text Decoration */
text-decoration: none;
color: black;
}
.dropdown-content {
display: none;
padding-left: 20px;
}
.banner-logo {
height: 40px;
border: 10px solid white;
border-radius: 12px;
margin-top: 5px;
}
.banner-logo-responsive {
margin-left: 150px;
height: 43px;
margin-top: 5px;
margin-bottom: 5px;
border: 10px solid white;
border-radius: 12px;
margin-left: 350px;
}
.mobile-logo {
height: 80px;
padding: none;
border: 10px white solid;
border-radius: 8px;
}
.main-section {
padding-top: 79px;
padding-left: 500px;
width: 903px;
font-family: 'Anton', sans-serif;
display: block;
object-fit: cover;
}
.background {
float: left;
position: fixed;
top: 0px;
left: 0px;
}
.wholeArea {
position: absolute;
height: auto;
top: 0;
right: 0;
}
.title {
font-size: 60px;
color: #132c54;
padding-bottom: 10px;
}
.description {
font-size: 25px;
color: #2569c8;
line-height: 29px;
margin-bottom: 8px;
}
.inputText {
font-size: 30px;
color: #132c54;
background-color: white;
}
.inputField {
font-size: 30px;
color: #132c54;
border-color: #132c54;
border-width: 4px;
border-style: solid;
outline-color: #132c54;
border-radius: 6px;
}
.noDecoration {
/* No Text Decoration */
text-decoration: none;
color: #132c54;
}
.selectInput {
width: 413px;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
}
.textInput {
width: 400px;
display: inline;
color: #132c54;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
padding-left: 3px;
}
.selectOption {
font-size: 30px;
color: #132c54;
}
.buttonStyle {
font-size: 35px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
}
.buttonToggleStyle {
font-size: 25px;
color: #132c54;
background-color: white;
outline-color: #132c54;
outline-width: 0px;
border-color: #132c54;
border-width: 4px;
border-style: solid;
border-radius: 6px;
margin-right: 20px;
}
.radioStyle {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: top;
}
.leftColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;
}
.leftColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;
}
.rightColumnBox {
position: absolute;
margin-right: 100px;
width: auto;
height: auto;
}
.rightColumnBox2 {
position: absolute;
margin-top: 321px;
margin-right: 100px;
width: auto;
height: auto;
}
.leftColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 100px;
float: left;
position: fixed;
display: inline;
top: 0px;
left: 0px;
}
.rightColumn {
width: auto;
height: auto;
margin-top: 81px;
margin-left: 100px;
margin-right: 400px;
float: left;
position: fixed;
display: inline;
top: 0px;
right: 0px;
}
.advertImage {
border: 10px white solid;
border-radius: 6px;
width: 300px;
height: auto;
}
.resultsSection {
display: none;
position: inherit;
}
.radioArea {
height: 45px;
width: 700px;
display: block;
}
.inputArea {
height: 50px;
width: 700px;
display: block;
}
.labelText {
width: 150px;
display: inline-block;
}
.resultsText {
line-height: 38px;
}
.resultsHeaderText {
line-height: 40px;
padding: 0px;
border: 0px;
margin: 0px;
margin-bottom: 10px;
}
.hideInput {
display: block;
}
.mainBorder {
border: 20px solid white;
border-radius: 12px;
background-color: white;
}
.titleBorder {
border: 20px solid white;
border-bottom: none;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: white;
}
.descBorder {
border: 20px solid white;
border-top: none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
background-color: white;
}
.tabContent {
display: none;
margin-bottom: 8px;
}
.tabSwitch {
margin-bottom: 8px;
}
#media screen and (min-width: 1920px) {
/* Responsive */
.main-section {
padding-top: 79px;
padding-left: 27%;
padding-right: 0px;
width: 47%;
}
}
#media screen and (max-width: 1920px) {
.main-section {
padding-top: 79px;
padding-left: 27%;
padding-right: 0px;
width: 47%;
}
}
#media screen and (min-width: 1920px) {
/* Responsive */
.banner-head-1 {
/* Home Header */
margin-left: 170px;
margin-right: 200px;
}
.banner-head-2 {
/* Food Header */
margin-left: 55px;
}
.banner-head-3 {
/* Exercise Header */
margin-left: 55px;
}
.banner-head-4 {
/* Calculators Header */
margin-left: 55px;
}
.banner-head-5 {
/* Calculators Header */
margin-left: 55px;
}
}
#media screen and (max-width: 1920px) {
.banner-head-1 {
/* Home Header */
margin-left: 170px;
margin-right: 200px;
}
.banner-head-2 {
/* Food Header */
margin-left: 55px;
}
.banner-head-3 {
/* Exercise Header */
margin-left: 55px;
}
.banner-head-4 {
/* Calculators Header */
margin-left: 55px;
}
.banner-head-5 {
/* Calculators Header */
margin-left: 55px;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="./script/banner.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style/banner.css">
<link rel="stylesheet" href="./style/calorie-calculator.css">
<link rel="stylesheet" href="./style/css-reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>
<div id="background" class="background"></div>
<span class="wholeArea">
<table class="banner noselect"> <!-- Banner -->
<tr>
<th class="banner-head-1">img</th>
<th class="banner-head-2">img</th>
<th class="banner-head-3">img</th>
<th class="banner-head-4">img</th>
<th class="banner-head-5">img</th>
</tr>
</table>
<div class="main-section noDecoration">
<div> <!-- Title -->
<p class="title titleBorder">CALORIE CALCULATOR</p> <!-- Title -->
<p class="description descBorder">This calculator will estimate how many calories your body needs to consume based on your weight, height and age and other factors. This is also a guide to maintain, gain or lose weight</p><!-- Description -->
</div>
<div class="mainBorder calculatorSection" id="inputSection"> <!-- Calculator -->
<div class="radioArea" style="padding-bottom: 5px;" id="input1">
<label class="inputText noDecoration labelText">Units</label>
<a href="./calorie-calculator.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator.html'">
<label class="inputText noDecoration">Metric</label>
</a>
<a href="./calorie-calculator-imperial.html">
<input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial.html'">
<label class="inputText noDecoration">Imperial</label><br>
</a>
</div>
<div class="radioArea" id="input2">
<label for="gender" class="inputText labelText">Gender</label>
<input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle">
<label for="Male" class="inputText">Male</label>
<input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle">
<label for="Female" class="inputText">Female</label><br>
</div>
<div class="inputArea" id="input3">
<label for="Input1" class="inputText labelText">Age</label>
<input type="number" id="Input1" class="inputField textInput" placeholder="12-80"><br>
</div>
<div class="inputArea" id="input4">
<label for="Input2" class="inputText labelText">Height</label>
<input type="number" id="Input2" class="inputField textInput" placeholder="100cm - 200cm"><br>
</div>
<div class="inputArea" id="input5">
<label for="Input3"class="inputText labelText">Weight</label>
<input type="number" id="Input3" class="inputField textInput" placeholder="30kg - 120kg"><br>
</div>
<div class="inputArea" id="input6">
<label for="exerciseInput"class="inputText labelText">Exercise</label>
<select id="exerciseInput" class="inputText selectInput">
<option class="inputText selectOption">Exercise</option>
<option value="noExercise" id="noExercise" class=" selectOption">Inactive</option>
<option value="lightExercise" id="lightExercise" class=" selectOption">Light Activity</option>
<option value="moderateExercise" id="moderateExercise" class=" selectOption">Moderate Activity</option>
<option value="activeExercise" id="activeExercise" class=" selectOption">Active</option>
<option value="veryActiveExercise" id="veryActiveExercise" class=" selectOption">Very Active</option>
<option value="extraActiveExercise" id="extraActiveExercise" class=" selectOption">Extra Active</option>
</select>
</div>
<button class="buttonStyle" onclick="showResults();" id="hideButton">ADD</button>
</div>
<div id="Calories" class="tabContent mainBorder">
<div class="resultsHeaderText">Calories</div>
<div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain1" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain1" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain1" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain1" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss1" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss1" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss1" class=""></span></div>
</div>
<div id="Protein" class="tabContent mainBorder">
<div class="resultsHeaderText">Protein</div>
<div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain2" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain2" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain2" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain2" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss2" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss2" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss2" class=""></span></div>
</div>
<div id="Carbs" class="tabContent mainBorder">
<div class="resultsHeaderText">Carbs</div>
<div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain3" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain3" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain3" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain3" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss3" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss3" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss3" class=""></span></div>
</div>
</div>
<div class="leftColumn">
<div class="leftColumnBox"><img src="./img/advert-1.png" class="advertImage"></div>
<div class="leftColumnBox2"><img src="./img/advert-2.png" class="advertImage"></div>
</div>
<div class="rightColumn">
<div class="rightColumnBox"><img src="./img/advert-3.png" class="advertImage"></div>
<div class="rightColumnBox2"><img src="./img/advert-4.png" class="advertImage"></div>
</div>
</span>
</html>

Instead of visibility: hidden, use display: none.
Instead of visibility: visible, use display: block.

Use visibility :
visibility: visible
visibility: hidden

The same css code doesn't give me the same result

I'am making a login page and i have a problem with css not making the same format for the email and the password despite writing the same code in css
This is the code:
.main {
text-align: center;
justify-content: center;
display: flex;
padding: 90px 0 90px 0;
background-color: rgb(252, 252, 252);
}
.sub-main {
display: flex;
justify-content: center;
height: 520px;
width: 50%;
box-shadow: 11px 12px 13px 12px rgb(252, 252, 252);
padding-top: 5px;
border-radius: 60px;
background-color: rgba(210, 180, 140, 0.644);
}
.imgs {
padding-top: 10px;
justify-content: center;
display: flex;
}
.user {
height: 90px;
width: 120px;
border-radius: 130px;
color: rosybrown;
font-size: 120px;
padding-bottom: 50px;
}
input {
width: 300px;
height: 50px;
border-radius: 60px;
box-shadow: inset 0px 0px 25px 0px #888;
border: none;
outline: none;
background-color: #fff;
}
.sub-main.data.email {
height: 100px;
width: 30px;
position: absolute;
padding: 14px 0 0 25px;
color: rosybrown;
font-size: 30px;
}
.username {
height: 100px;
width: 30px;
position: absolute;
padding: 14px 0 0 25px;
color: rosybrown;
font-size: 30px;
}
.sub-main.data.password {
height: 100px;
width: 30px;
position: absolute;
padding: 14px 0 0 25px;
color: rosybrown;
font-size: 30px;
}
.name {
padding-right: 30px;
font-size: 20px;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.second-input {
padding-top: 9px;
}
button {
width: 380px;
height: 50px;
border-radius: 60px;
background-color: tan;
color: black;
font-size: 25px;
border: none;
}
.login-button {
padding-top: 25px;
}
<div className="main">
<div className="sub-main">
<div>
<div className="imgs">
<div className="user">
<i className="bi bi-person-badge-fill"></i>
</div>
</div>
<div className="data">
<div>
<input onChange={(e)=> setEmail(e.target.value)} type="text" placeholder="Adresse email" className="email" />
</div>
<div>
<input onChange={(e)=> setPassword(e.target.value)} type="password" placeholder="Mot de passe" className="password" />
</div>
<div>
<div className="login-button">
<button type="submit">Connexion</button>
</div>
</div>
</div>
</div>
</div>
</div>
I gave the same characteristics for both email and password but they have different formats,is it something to do with classname?
This is the result i get :

you should change .sub-main.data.email { into .sub-main .data .email {.
also same change for password is needed.

Make a p tag into an input field by pressing on a random card

I am new to JS, HTML and CSS. So far I created a button which creates random cards. On the card is a p tag "title". When you click on the card you will see two input fields and a save- and a delete button.
I need help with the design. I tried my best but i cant make this two buttons and the two input fields look good. Can you help me on that.
When I click on a card I want the p tag title goes into one of the input fields. When I click on the input field the p tag should disappear again.
And what I want to make last is that only one card can be in edit mode.
This is my Code:
$(document).ready(function() {
$("button.plus").on("click", function() {
var newCard = $('#cardPrototype').clone(true);
$(newCard).css('display', 'block').removeAttr('id');
$('#newCardHolder').append(newCard);
});
$('body').on('click', '.card', function() {
$(this).find('form').show();
$(this).find('span').remove();
});
/*delete button*/
$('body').on('click', '.card .delete', function() {
$(this).closest('.card').remove();
});
});
.item {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
}
button div.item {
right: 0;
margin-right: 10px;
height: 80px;
width: 80px;
border-top-left-radius: 55px;
border: 5px solid white;
background-color: #666666;
font-size: 70px;
color: white;
text-align: center;
line-height: 75px;
bottom: 10px;
position: fixed;
cursor: pointer;
z-index: 2;
}
.input-feld {
font-family: TheSans Swisscom;
margin: 3px;
width: 260px;
}
.card {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
position: relative;
}
.delete {
font-family: 'TheSans Swisscom';
right: 12px;
top: 0;
position: absolute;
}
.speichern {
font-family: 'TheSans Swisscom';
background-color: greenyellow;
border-radius: 5px;
}
.abbrechen {
font-family: "TheSans Swisscom";
background-color: red;
border-radius: 5px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="plus">
<div class="item">
<p>+</p>
</div>
</button>
<div id="newCardHolder">
</div>
<div id="cardPrototype" class="card" style="display:none;">
<p class="delete">x</p>
<span>Title</span>
<form name="theform" style="display:none;">
<input class="input-feld" type="text">
<br>
<input class="input-feld " type="text">
<br>
<input class="speichern"type="button" onClick="new Person()" value="Speichern">
<input class="abbrechen"type="button" onClick="new Person()" value="Abbrechen">
</form>
</div>

Try This - May be this might help you
I have changed
some design changes with CSS
Input will have a placeholder for the corresponding title in span tag
Only One Item .class will be visible in edit mode
$(".plus").on("click", function() {
var newCard = $('#cardPrototype').clone(true);
$(newCard).css('display', 'block').removeAttr('id');
$('#newCardHolder').append(newCard);
});
$('body').on('click', '.card', function() {
$(this).find('.input-feld').attr("placeholder", $(this).find('span').text());
$(this).find('span').hide();
$(this).find('.minimize').show();
$(this).find('form').show();
});
$('.card').on('click', function() {
$('.card').find('form').hide();
$('.card').find('span').show();
$('.card').find('.minimize').hide();
});
/*delete button*/
$('body').on('click', '.card .delete', function() {
$(this).closest('.card').remove();
});
/*min button*/
$('body').on('click', '.card .minimize', function() {
return false;
});
.item {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
}
.item p {
margin: 0px;
}
div.item {
right: 0;
margin-right: 10px;
height: 80px;
width: 80px;
border-top-left-radius: 55px;
border: 5px solid white;
background-color: #666666;
font-size: 70px;
color: white;
text-align: center;
line-height: 75px;
bottom: 10px;
position: fixed;
cursor: pointer;
z-index: 2;
}
.input-feld {
font-family: TheSans Swisscom;
margin: 5px 3px;
padding: 3px;
width: 250px;
}
.card {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #F4F4f4;
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
}
.delete {
font-family: 'TheSans Swisscom';
right: 12px;
top: -10px;
color: red;
position: absolute;
font-weight: bold;
cursor: pointer;
}
.minimize {
font-family: 'TheSans Swisscom';
right: 28px;
top: -10px;
color: grey;
position: absolute;
font-weight: bold;
cursor: pointer;
display: none;
}
.speichern {
font-family: 'TheSans Swisscom';
background-color: lightgreen;
border-radius: 5px;
color: darkgreen;
border-color: lightgreen;
margin-top: 5px;
}
.abbrechen {
font-family: "TheSans Swisscom";
background-color: orangered;
border-radius: 5px;
margin-left: 10px;
color: white;
border-color: orangered;
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="plus">
<div class="item">
<p>+</p>
</div>
</div>
<div id="newCardHolder">
</div>
<div id="cardPrototype" class="card" style="display:none;">
<p class="delete" title="delete">×</p>
<p class="minimize" title="minimize">–</p>
<span>Title</span>
<form name="theform" style="display:none;">
<input class="input-feld" type="text">
<br>
<input class="input-feld" type="text">
<br>
<input class="speichern" type="button" onClick="new Person()" value="Speichern">
<input class="abbrechen" type="button" onClick="new Person()" value="Abbrechen">
</form>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</div>
</body>
</html>

Link child to button working in Chrome but not in Internet Explorer

I can not figure out why this is happening. I have a link that is a child element to a button, and it is supposed to bring you to a different part of the page when it is activated. The link works in Chrome, but when I try and load the page on Internet Explorer, the links don't work. This is my HTML and CSS for this part of the site:
HTML:
<form method="get" action="http://www.google.com/search" target="_blank">
<div style="border:1px solid black;padding:4px;width:20em;float:right;display: inline-block;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value=""/>
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
</td></tr></table>
</div>
</form>
<div id="score_container">
<button id="cubs_score">How are the Cubs Doing?</button>
<button id="packers_score">How are the Packers Doing?</button>
</div>
CSS:
#cubs_score{
width: 300px;
height: 100px;
color: #CC3433 !important;
background-color: #0E3386;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
z-index: 3;
position: relative;
text-decoration: none;
}
#packers_score{
width: 300px;
height: 100px;
color: #FFB612 !important;
background-color: #203731;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
position: relative;
z-index: 3;
text-decoration: none;
}
#score_container{
width: 310px;
height: 200px;
padding: 20px;
background-color: grey;
z-index: 2;
color: inherit;
}
The versions of IE that I have checked in are 10 and 11.

According to Phrasing_content a button can contain
<a>, if it contains only phrasing content.
So it is not an error.
But there is a different behaviour between the two browsers, so I added some jQuery code:
$(function () {
$('#score_container button').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
window.location.hash = this.childNodes[0].getAttribute('href');
});
});
#cubs_score{
width: 300px;
height: 100px;
color: #CC3433 !important;
background-color: #0E3386;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
z-index: 3;
position: relative;
text-decoration: none;
}
#packers_score{
width: 300px;
height: 100px;
color: #FFB612 !important;
background-color: #203731;
font-size: 30px;
text-align: center;
font-variant: small-caps;
padding: 10px;
margin: auto;
position: relative;
z-index: 3;
text-decoration: none;
}
#score_container{
width: 310px;
height: 200px;
padding: 20px;
background-color: grey;
z-index: 2;
color: inherit;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form method="get" action="http://www.google.com/search" target="_blank">
<div style="border:1px solid black;padding:4px;width:20em;float:right;display: inline-block;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value=""/>
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
</td></tr></table>
</div>
</form>
<div id="score_container">
<button id="cubs_score">How are the Cubs Doing?</button>
<button id="packers_score">How are the Packers Doing?</button>
</div>

In the comments, you were wondering how to style a button to have cool effects like a link. Here is an example of that:
#link {
text-decoration: none;
color: #FFF;
background-color: #006400;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
#link:visited {
text-decoration: none;
color: #FFF;
background-color: #006400;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
#link:hover {
text-decoration: none;
color: #006400;
background-color: #FFF;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
#link:active {
text-decoration: none;
color: #056905;
background-color: #EEE;
transition: background-color.2s, color .2s;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
}
<a id="link" href="http://www.stackoverflow.com">Stack Overflow</a>
Hope that this helps you finish your project!

We Keep Coding

JavaScript is the programming language of the Web.

Aligning div inside a div with Label? - javascript

Related

My site breaks at 760px. How can I fix it?

When I hide an element and show another one, other divs move. How to stop this?

The same css code doesn't give me the same result

Make a p tag into an input field by pressing on a random card

Link child to button working in Chrome but not in Internet Explorer

Categories

Resources