So I have this search form on my website, and despite the fact that in Chrome and IE it looks fine… In Firefox it is several pixels taller(or maybe just my firefox?). I made a fiddle: http://jsfiddle.net/death180/jkuHT/
I’m just trying to figure out what the problem is.. It’s so weird that ONLY Firefox does it(the latest version at least).
The first thing you should do (if you want both to be exactly the same height), is to actually give them a height value. You didn’t have that so it was a bit at the mercy of the text size and other thing. Giving them an actual height gives you full control.
BUT WAIT! Input fields and buttons work a little different when it comes to that.
The actual resulting height of an input field is the height + padding + border.
The actual resulting height of a button is just the height. Padding is irrelevant in this case.