Question

I have a problem with my search box. I’m trying to make the text field and button the same height, but I can’t get it right in all browsers. Here is the code: http://codepen.io/anon/pen/ygCFz . This method works fine in Firefox, but not in Chrome.

So what would be the best method to have an equal height and position for both the text field and button?

Thanks!

//edit: because someone asked for the code for further reference, here it is:
HTML

<form id="search" action="" method="get">
        <input type="text" name="search" class="sfield" value="search and go"/>
        <input type="submit" value="Search" class="sbutton"/>
</form>

CSS

input.sfield{
  background-color:#fff;    
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1em;
    height:26px;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px;
}

Answer 1

Use padding instead height on input elements. Line-height should be exactly the same as font-size for Firefox. So if you want you font-size to 16px, put your line-height to 16px and add padding at top and bottom. For your submit button, use absolute positionning to be sure it will be at top:0 and bottom:0. Just add padding-left for submit button width equivalent on input and it’s all done !

#search {
    position:relative;
    display:inline-block;
}

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1;
    padding:5px;
    display:inline-block;
    padding-right:50px;
}

input.sbutton{
    background-color:#d91515;
    border:none;    
    color:#fff;
    position:absolute;
    top:0px;right:0px;bottom:0px;
    width:50px;
}