- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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.
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….. :-/