Firefox 3.6 and CSS difference from previous versions of Firefox 3.5 and back?
- by American Yak
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?
