I am trying to make a validation box after an input field, however, across different browsers the sizing goes wrong e.g. there is a big difference between firefox and chrome.
Is there a better way to make this box so that the sizing is equal across all browsers? Here is the code and a jsfiddle of how I am doing it at the moment : http://jsfiddle.net/wPS7t/
And here is an image of the problem:
HTML
<form id="formStyles">
<div id="inputWrapper">
<input type="text"/>
<label id="xlabel">x</label>
</div>
</form>
CSS
body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Calibri;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#formStyles{
width: 800px;
margin: 0 auto;
top: 200px;
position: relative;
}
input{
font-size: 18px;
padding: 5px;
}
#inputWrapper{
position: relative;
margin-left:auto;
margin-right:auto;
width:400px;
}
#xlabel{
background-color: red;
padding: 7.2px;
color: white;
left: -6px;
position: relative;
top:-1px;
}
Maybe try padding 7px? I'm not positive but I don't think both browsers except 7.2px as a result and probably is rounding it.
Related
I have a problem with HTML forms.
#subscription {
display: block;
margin: auto;
background-color: blue;
width: 550px;
height: auto;
}
form#subscription input#subscription-text {
width: 200px;
height: 30px;
background: orange;
border-style: none;
}
form#subscription input#subscription-submit {
width: 200px;
height: 30px;
background-color: rgb(208, 225, 125);
border-style: none;
padding: 0;
margin: 0;
}
<form id="subscription" action="subscription">
<input id="subscription-text" type="text" placeholder="INPUT">
<input id="subscription-submit" type="submit" value="SUBMIT">
</form>
Despite the fact, that I have removed all the margins and paddings for a submit button, it still has a padding-like VERTICAL spacing:
Why is that so, and how could I remove this spacing?
In fact there are TWO issues here...
The horizontal spacing is cause by whitespace in the HTML which affects inline/inline-block elements.
That subject is covered extensively in How to remove the space between inline-block elements?
The second issue is the disparity in the sizes of the two inputs.
This is caused by the fact the the two input types have different box-sizing default properties.
So we apply an overriding default reset:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
and a solution to the whitespace (here I used floats and a quick overflow clearfix)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form#subscription {
display: block;
margin: auto;
background-color: blue;
width: 550px;
overflow: auto;
}
form#subscription input#subscription-text {
width: 200px;
height: 30px;
background: orange;
border-style: none;
float: left;
}
form#subscription input#subscription-submit {
width: 200px;
height: 30px;
background-color: rgb(208, 225, 125);
border-style: none;
float: left;
}
<form id="subscription" action="subscription">
<input id="subscription-text" type="text" placeholder="INPUT">
<input id="subscription-submit" type="submit" value="SUBMIT">
</form>
you have two problem.
1. positioning of element and
2. box-sizing problem.
add the two line of code in the respective section of your css code as shown below.
form#subscription input#subscription-text {
width: 200px;
height: 30px;
background: orange;
border-style: none;
float: left; // this line solves prob-1
box-sizing: border-box; // this line solves prob-2
}
Learn about box-sizing here: https://css-tricks.com/box-sizing/
Learn about float here: https://developer.mozilla.org/en/docs/Web/CSS/float
I have a icon font and I need to center my letter in a circle.
I copy my code in this jdfiddle
This is css code
.icon:before {
margin: 0 auto;
font-size: 57px;
}
.icon h2 { text-align: center; }
.circle.icon:before {
border-radius: 50%;
color: #FFFFFF;
width: 65px;
height: 65px;
display: block;
text-align: center;
line-height: 1.2em !important;
}
.icon.mobile:before{ content: 'F'; }
.mobileC { color: #8CC63E; }
.icon.mobile-background:before { background-color: #8CC63E; }
this is html code
<div class="icon circle mobile-background mobile"><h2 class="mobileC ">Mobile games</h2></div>
As you can see via normal browser they are centered
but when I open the page via mobile I see this
The same result if I turn-off the line-height from browser inspector.
Can someone know how can fix this?
Did you try to add a
vertical-align:middle;
?
in most cases, it works.
Or you can just use padding, and avoid resizing by using:
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
I want to put three divs in order as following: input, break, ouput. And thier parent div is the container. I am facing problem in applying the box-sizing for these divs, here is my css:
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}
You have to apply box-sizing to the children as well:
.container > * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
CSS's border-box property doesn't take into account margins. You'll need to set margin of 0 and adjust padding accordingly, but this may be undesired if you're using borders. You can try using percentages for margin so they (widths plus margins) add up to 100%. Also make sure that the child divs are inheriting box-sizing; you may need to define that specifically. I usually set this in CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Lastly, get rid of that .break div. Use margins instead.
Is your output div dropping below your input and break divs? That's because your border pixels are being added onto your widths.
49% + 2% + 49% + 8px of borders (2 on each side of input and 2 more on each side of output) > 100%
You'll have to try different things to get it to work, but dropping to 48% or even 45% might work. Since your area already floating left & right the extra space will just go in the middle.
this simple three-column layout DEMO
HTML
<div class="header">header</div>
<div class="layout">
<div class="col1">column 1</div>
<div class="col2">column 2</div>
<div class="col3">clolumn 3</div>
</div>
<div class="footer">footer</div>
CSS
.header, .footer { background: #D5BAE4; }
.layout { overflow: hidden; }
.layout DIV { float: left; }
.col1 { background: #C7E3E4; width: 20%; }
.col2 { background: #E0D2C7; width: 60%; }
.col3 { background: #ECD5DE; width: 20%; }
try this (compliments of _s). when you give it a % based width and then a px based border the default is to add them together, this should fix that.
*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
-moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
box-sizing: border-box;
}
LIVE DEMO
HTML
<div class="container">
<div class="input">
</div>
<div class="break">
</div>
<div class="output">
</div>
</div>
CSS
html {
border: groove 8px red;
margin: 20px;
}
.container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height:75%;
}
.container div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container .input {
width: 49%;
height: 100%;
border: solid 2px red;
float: left;
}
.container .break {
width: 2%;
height: 100%;
background: blue;
float: left;
}
.container .output {
width: 49%;
height: 100%;
border: solid 2px green;
float: right;
}
Problem
I have set my CSS with;
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:0
}
Since doing so though i have inconsistencies with the height of a div that has a set height, across different browsers.
Div's CSS in question
.content.one /*inquiry form*/ {
position: absolute;
float: left;
display: none;
top: 50px;
height: 615px;
left: -255px;
width: 960px;
z-index: 5;
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 10px;
background-color: #000000;
}
You have to use non-standart properties to use (sad but code will become invalid, because of them :()
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
So full style will be:
div {
width: 300px;
background: #ccc;
padding: 20px;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari, Chrome */
box-sizing: border-box; /* ie, opera */
}
Now div will be 300px width with all margins and paddings.
One cons is box-sizing property doesn't work in IE6 and IE7.
You can use nested layers instead:
Html:
<div class="block">
<div>I have 100% width</div>
</div>
Css:
.block {
width: 150;
}
.block div {
background: #fc0;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}
Source: http://htmlbook.ru/samlayout/blochnaya-verstka/blochnaya-model
I have a responsive web page in which I am trying to show a modal with an image inside. The following is the html of the modal
<div id="open_modal" class="modal">
<div id="chicken">
<img src="images/chicken.png" alt="McChicken"/>
<div class="kosullar" title="lorem ipsum">Katılım Koşulları</div>
</div>
</div>
And the following is the css I have for the modal
.modal {
display: block;
overflow: auto;
z-index: 1001;
position: absolute;
height: 100%;
overflow: hidden;
padding-top: 77px;
padding-bottom: 10px;
opacity: 1 !important;
}
#chicken{
height: 100%;
color: #fff;
overflow: hidden;
text-align: center;
float:left;
}
#chicken img{
height: 100%;
float: left;
}
.kosullar{
color: #fff;
font-size: 10px;
height: 20px;
background-color: #2B9BC8 !important;
float: left;
position: absolute;
bottom: 15px;
padding: 2px;
text-align: center;
cursor: pointer;
border: 1px solid;
width: 100%;
}
As you can see in the css I have added 77px top padding to the modal class, so that it wouldn't overlap with my navigation bar. Other than that the modal should have the same height as the display and its width should be automatically calculated according to the aspect ratio of the image. This works very well on Chrome (and IE as well surprisingly), but it misbehaves on Firefox. On Firefox the image looks as it's supposed to, but the width of the modal is wider than it should be. To be specific, the width of the modal is what it should have been if there was no padding on the modal. How should I modify this css so that Firefox will calculate the width of the modal successfully. You can visit adwin.com.tr to see the problem for yourselves.
First of all mention <!DOCTYPE HTML> (in case of HTML5) if you have not mentioned and then try adding
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
in you modal class, this should help you solve the width issue.
Alternatively you can override the bootstrap's
*, *:before, *:after {
-moz-box-sizing: border-box;
}
to
*, *:before, *:after {
-moz-box-sizing: inherit;
}
You can also refer w3
try this:
#chicken img {
display: block;
float: none;
height: 100%;
margin: 0 auto;
}