i'm writing my little css framework but i got a strange problem, check this jsfiddle please: http://jsfiddle.net/76y8B/
as you can see the red div has 1px margin right but i setted all to margin:0;
Any help please?
Your making a calculation error. You've sized your div to 96% of the body. Say the body is 1000 pixels wide, that means the div is now 960 pixels. You then give it a padding of 2% on both left and right side, meaning 2% of 960 pixels, or 19.2 pixels on both ends. 960+19.2+19.2 = 998.4 pixels total width. That's where the minor gap comes from.
The only way to fix this without fixing other markup is to correct for the calculation origin of the padding, ie. set the paddings not to (100-96)/2 but ((100/96)-1)/2 or 2.08333%. The following thus solves the gap:
.heading {
padding: 13px 2.08333% 8px;
}
Alternatively you can use border-box to change how these values are calculated, see this other answer here.
Another solution is to set 100% width and a cooler box-sizing: border-box.
.heading {
/* new stuff */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
/* end of new stuff */
clear: both;
color: #FFFFFF;
line-height: 25px;
margin: 0;
min-height: 28px;
padding: 13px 2% 8px;
}
Running demo
Read more on Box-sizing, and on the differences between the W3C Box model and the Traditional Box Model:
Box models
In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.
The element has the display property inline-table. Is the per design? That, in combination with the 2%+2%+96% logic is what is causing the margin, change it to inline-block and you’ll see.
display:inline-table in .row-fluid is causing problem.
Remove it or write display:block.
Updated fiddle here.
Why exactly is the padding calculated differently between a and button elements?
HTML
<button type="button">CLICK</button>
LINK
CSS
button {
padding: 10px;
height: 30px;
border: 0;
background: #ccc;
line-height: 30px;
}
a {
display: inline-block;
padding: 10px;
height: 30px;
background: #ccc;
line-height: 30px;
}
The default box-sizing value for buttons in Chrome (and Firefox) is border-box:
DEMO
I.e. the total height, including padding (and border and margin), of the element is 30px, not 50px like for the link. You can fix this by setting
box-sizing: content-box;
explicitly.
DEMO
More info about the box model.
Why the border-box is the default value I cannot say. I haven't found a specification for it. Chrome, Firefox and Safari seem to do this (didn't test other browsers).
<a href...>
Links never have a set-height, if you inspect the html, you can see that; what is really done is giving it a line-height and padding. when you write height: 30px, it is useless.
With respect to that, you are defining a height for the <button>, which is why it does not look the same as how you styled your link
Here is a fiddle to show how to make them the same, by removing the set-height of the <button>
I am trying to style some buttons and I am trying to both limit the width of my buttons and have some horizontal padding, so there is some space between the text and the border.
I have therefore applied the following CSS to my class:
.class1 {
border: 1px solid;
padding: 0 20px;
max-width: 100px;
white-space: nowrap;
overflow:hidden;
}
See this jsFiddle for an example.
My problem is that when the text is too long, Firefox (latest version: 22) does not respect the left padding anymore and make the text stick to the left border, as one can see in the middle button in this screenshot:
When Chrome still respect the left padding:
Is there some way I can make Firefox behaves the same way as Chrome and IE10 here?
Some things I have determined:
IE10 behaves the same way as Chrome, so I think it's a Firefox problem.
If I replace buttons with spans, it works, but of course I need buttons. I would like to avoid using <a> if it is not necessary, since it is not semantically correct.
Changing the box-sizing property or resetting -moz-focus-inner, does not help.
Try this 'hack':
.class1::-moz-focus-inner {
padding: 0px 20px;
}
You have to remove the padding in Firefox to prevent double padding.
#-moz-document url-prefix() {
.class1 {
padding: 0px;
}
}
(It works for me in FF 22, jsFiddle)
I have an issue with Firefox when applying -moz-box-sizing : border-box; to inputs, seems like the text I type in is somewhere hidden or overflown or something.
You can see the issue in here : Test ( resize your window to a size smaller than 980px because it's a mobile version );
So what could be the issue there ? Because I tried everything I could find, and the only thing that worked is removing the -moz-box-sizing : border-box; property (:
You should set the height to 100%. I tried the following CSS for your input fields, and it helped:
input[type="text"] {
-moz-box-sizing: border-box;
font-size: 16px;
height: 100%;
padding: 20px;
width: 100%;
}
==> The reason is, that your padding of 20px is too much. Try first removing the padding. You will see that the input field's text gets visible suddenly ;-). After I saw this, I set the height to 100%. Now you can decrease the padding to e.g. 10px and everything looks fine.
I had this problem but initially in Safari 6+. Some text inputs respected padding top/bottom, but others didn't and ended up shorter. By using height: 100% on all of them as suggested here, they did all become consistent and seemed to respect padding top/bottom. However, it added a couple extra pixels in height.
In the end, I ended up doing box-sizing: content-box on all of them, which made them respect padding top/bottom but without the extra added pixels in height.
Had to chase this with a width: calc(100% - <padding L+R>) though, which is a disadvantage.
I solved this problem differently by adding a custom padding for the input text tags
input[type="text"] {
padding: 6px 12px 12px 6px;
}
input[type="email"] {
padding: 6px 12px 12px 6px;
}
input[type="password"] {
padding: 6px 12px 12px 6px;
}
input[type="text"] {
padding-top:0;
padding-bottom:0;
vertical-align:middle;
}
The line-height property usually takes care of vertical alignment, but not with inputs. Is there a way to automatically center text without playing around with padding?
I ran into this problem myself. I found that not specifying an input height, but using the font-height and padding combined, results in vertically aligned text.
For instance, lets say you want to have a 42px tall input box, with a font-size of 20px. You could simply find the difference between the input height and the font-size, divide it by two, and set your padding to that amount. In this case, you would have 22px total worth of padding, which is 11px on each side.
<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />
That would give you a 42px tall input box with perfect vertical alignment.
I've not tried this myself, but try setting:
height : 36px; //for other browsers
line-height: 36px; // for IE
Where 36px is the height of your input.
In Opera 9.62, Mozilla 3.0.4, Safari 3.2 (for Windows) it helps, if you put some text or at least a whitespace within the same line as the input field.
<div style="line-height: 60px; height: 60px; border: 1px solid black;">
<input type="text" value="foo" />
</div>
(imagine an   after the input-statement)
IE 7 ignores every CSS hack I tried.
I would recommend using padding for IE only. Should make it easier for you to position it correctly if it only has to work within one specific browser.
I know I'm late to the party but hopefully this'll help anyone looking for a concise answer that does work across all major browsers (except IE6, we have decided to stop supporting that browser so I refuse to even look at it anymore).
#search #searchbox {
height: 21px;
line-height: 21px;
}
cheers!
JP
In my opinion, the answer on this page with the most votes is the best answer, but his math was wrong and I couldn't comment on it.
I needed a text input box to be exactly 40 pixels high including a 1 pixel border all the way around. Of course I wanted the text vertically aligned in the center in all browsers.
1 pixel border top
1 pixel border bottom
8 pixel top padding
8 pixel bottom padding
22 pixel font size
1 + 1 + 8 + 8 + 22 = 40 pixels exactly.
One thing to remember is that you must remove your css height property or those pixels will get added to your total above.
<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />
This is working in Firefox, Chrome, IE 8, and Safari. I can only assume that if something simple like this is working in IE8, it should work similarly in 6, 7, and 9 but I have not tested it. Please let me know and I'll edit this post accordingly.
Go for line-height.
The vertical-align tag works fine for the submit button but not for the text in the input field.
Setting line-height to the height of the input field works on all browsers. Incl IE7.
After much searching and frustration a combo of setting height, line height and no padding worked for me when using a fixed height (24px) background image for a text input field.
.form-text {
color: white;
outline: none;
background-image: url(input_text.png);
border-width: 0px;
padding: 0px 10px 0px 10px;
margin: 0px;
width: 274px;
height: 24px;
line-height: 24px;
vertical-align: middle;
}
input[type=text]
{
height: 15px;
line-height: 15px;
}
this is correct way to set vertical-middle position.
Just don't set the height of the input box, only set the font-size, that will be ok
This is how I do it.
<ul>
<li>First group of text here.</li>
<li><input type="" value="" /></li>
</ul>
then inside your CSS file,
ul li {
display: block;
float: left;
}
That should work for you.
Try :
height: 21px;
line-height: 21px; /* FOR IE */
Because on some versions of IE (< 9) the property height is not properly interpreted.
Late to the party, but the current answers won't work if you have box-sizing: border-box set (which a lot of people do for form elements these days).
Just reset the box sizing for IE8 to box-sizing: content-box; then use one of the padding / height answer.
The inner vertical alignment will depend on font height and input height, so, it can be adjusted using padding !!!
Try some like :
.InVertAlign {
height: 40px;
line-height: 40px;
font-size: 2em;
padding: 0px 14px 3px 5px;
}
...
<input type="text" class="InVertAlign" />
Remember to adjust the values on css class according to your needs !
I was just working on this within MaterialUI's text inputs. Adding padding-top: 0.5rem to the input style worked for me. While this was adjusting the padding, at least you don't need to worry about adjusting for updates, much less different breakpoints.
It isn't ideal but changing the bottom padding is the easiest solution. Anything else is too much overhead.
padding-bottom: 20%;
You should remove your title text and use the input placeholder for your label's title. Some visual and CSS work after that and your form will be looking tight and user friendly. I'm aware of the disadvantages but this will completely relieve the alignment wrestling.
If your element is a block element contained/or with display like so:
display: table-cel
Or, with an fixed line-height, you can set the vertical align like so:
Vertical-Align: Middle;
It won't work for other cases, but it works fine on these conditions.