Search text field and button height / position (CSS)

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;
}

Answer 2

You can either set a definite height property for both elements or you can simply tell Sbutton to inherit the styles from Sfield.

<input type="submit" value="Search" class="sfield sbutton"/>

I also adding a bit of padding to make it even.

http://codepen.io/anon/pen/zBlwD

Answer 3

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:0.9em;
    height:26px;
    margin: 0;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border: 1px solid #d91515;  
    color:#fff;
    position:relative;
    margin: 0;
    height:30px;
}

Answer 4

Well, I hope the solution isn't this simple, but you have height defined twice in your rule for the sbutton class:

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;  //that's one
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px; //that's two
}

See what happens when you get rid of one. It should work. Also take a look at the line-height rule for your textbox. If the font size is different than the line height, that would explain why the sizes are different. Firefox and Chrome use different conversions from ems to pixels and vice versa.