Firefox adds an extra pixel on top of a text field, how to remove it?

Question

I want to create a search bar like one in this page http://dl.dropbox.com/u/333492/search/form.html

If you load that page with chrome, opera or safari, the search bar looks like it should (tested on mac). However, if you use firefox (tested at least with ff 3.5 and 3.6 on mac), you'll see that one extra pixel gets added on top of the text field, and thus the text field is one pixel lower than the button, which looks ugly.

I tried to remove all possible borders and paddings but the problem persists. I also noticed that it doesn't occur when the search button is not there.

Does someone have any idea on what might be causing this behavior? Or, even better, could someone alter the CSS on that page so that the problem would be fixed?

Answer 1

I finally found a blog post that explains the cause of the problem and proposes an answer that partially fixes the situation. Thanks @anttisykari in Twitter!

http://christophzillgens.com/en/articles/equal-height-input-and-button-elements-in-firefox-and-safari

So the correct answer is to add following lines to the CSS:

 input[type="submit"]::-moz-focus-inner {border:0;} /* ff specific stuff, yuck*/ 
 input[type="submit"]:focus {background:#333;} /* change accordingly depending on your button bg color, this fixes the focus problem when using keyboard to move betweenform elements */

However, IE8 still broke my form, so I had to add these to both input elements.

 display: block;
 position: relative;
 float: left;

Now everything seems to be ok.