Re: Tiny tiny firefox glitch.

[Senff]

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.

So let’s use these extra declarations:

.searchbar {height:20px; float:left;}

.searchbtn {height:42px;}

The input field will be 16 + (10+10) + (1+1) = 38px high.
The button will be 38px high.

Then, to align them properly, you’ll have to float the input field. Result: http://jsfiddle.net/senff/jkuHT/3/

Darn, when I explain it in detail like this, I actually wonder if I’m not overcomplicating things….. :-/