Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #38670
    Alex
    Participant

    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).

    #105119
    Senff
    Participant

    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….. :-/

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.