Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back?
Posted
by American Yak
on Stack Overflow
See other posts from Stack Overflow
or by American Yak
Published on 2010-01-25T16:26:14Z
Indexed on
2010/03/18
16:21 UTC
Read the original article
Hit count: 381
css
|firefox3.6
So, in upgrading to Firefox 3.6, the CSS broke on input boxes. The padding has increased -- it might also be the font-size is somehow behaving different. Wondering if anyone else has seen this problem yet. Can't quite figure it out.
HTML CODE:
<form>
<fieldset>
<label for="inputField">Label</label>
<input type="text" id="inputField" />
</fieldset>
</form>
CSS CODE:
form fieldset label {
display:block;
font-size:1.2em;
font-weight:bold;
padding:12px 9px;
}
#jumptoBox fieldset input {
background: url("../images/input.png") no-repeat scroll left top transparent;
font-size: 1.2em;
padding: 4px 5px 16px;
width: 99px;
height: 29px;
}
(Image dimensions: 109 width x 34 height)
So one thing to note, the fix (as outlined below) includes removing the height, or at least setting it to auto, and then compensating for it by using padding (a fix that bothers me on many levels, but we'll set that aside for now). BUT webkit seems to have its own problems with this now, since it wants to center the text vertically (ignoring any evidence of line-height) according to the height of everything. In other words, if you want the text vertically closer to the top, I haven't been able to figure out a way to do that.
Ideas?
© Stack Overflow or respective owner