Firefox 3.5.9 pushes down input:text when all other browsers render it fine

Question

Hi,

I have run into a really odd bug with FF3.5.9 (and potentially lower) where it is moving the input:text below the input:submit. The strangest thing with this is that it is working on IE6/7/8, Chrome, Safari and Firefox 3.6. Here is a test page so you can see how it is marked up: http://paste-it.net/public/s6479e6/

I can fix the issue for FF3.5.9 by adding padding-bottom (15px) but this then puts the other browsers out of action.

Has anyone else had a similar issue and found a fix? Seems like such a minor issue but I just can't find a fix for it and I am not really into having to absolute position the inputs as that seems too hacky!

Thanks for your time,

Ad

Answer 1

FF 3.5.9 had some strange bugs in it. In particular a javascript bug that threw a legitimate sounding error, and FF being my main Javascript debugger I spent 2 hours down a terrible time-suck.

Checking deep in the documentation I found out that FF is conforming to some specification that no one else is. Right now FF is not in a great state for consistency, so you may have to break the habit of believing that FF is always right and the other browsers are wrong. You may want to keep your finger on the Mozilla blogs and see what they are saying so you have fewer surprises.

So basically what Alex said, but be more wary of FF for a while.

Answer 2

So it looks like there isn't a clean option ... if anyone else ends up having this option I ended up just floating the input:submit. Not nice but it works.

Thanks all for your help!

Answer 3

line-height is the same height as the input? if not, try and set it.

for example:

 input[type="text"] {
   height: 50px;
   line-height: 50px;
 }