CSS - IE doesn't display quite right

Question

        <div class="searchWrapper">
          <table height="100%" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center"><input type="text" id="searchInput" class="searchBox" /></td>
                <td><div class="searchBtn">Search</div></td>
            </tr>
          </table>           
        </div>

With the CSS:

/* Search */
.searchWrapper
{
    background-image:url(../images/menuBG.jpg);
    height:45px;
    width:380px;
    background-position:bottom;
    background-repeat:repeat-x;
    background-color:#79ABC4;
}

.searchBtn
{
    cursor:pointer;
    border:outset 1px #ccc;
    background:#999;
    color:#666;
    font-weight:bold;
    height: 26px;
    position:relative;
    top:1px;        
    width: 75px;
    background:url(../images/formbg.gif) repeat-x left top;
    margin-right: 5px;
    text-align:center;
    line-height: 27px;
    font-size: 14px;
}
.searchBox
{
    width:270px;
    height:25px;
    font-size: 16px;
    border:1px solid #3C81AA;
    margin-left:5px;
    line-height: 25px;
    padding-left:10px;
    padding-right:10px;
    color: #666;
}

If you run this in FF, it displays fine, the fake button displays as the same height and position as the input box.

In IE though, I can't get it to match up, it seems to be 1px off. The height of the fake button is slightly too small. I've fiddled for ages and can't seem to figure it out!

Before anyone comments as well, I'm using tables here because it just makes aligning vertically a lot easier.

Answer 1

If updating your HTML is an option you could use conditional comments and serve IE a slightly different version of the CSS that corrects the height:

HTML

<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/ie.css" media="all" />
<![endif]-->

styles.css

.searchBtn {
    height: 26px;
} 

ie.css

.searchBtn {
    height: 25px;
} 

Answer 2

I would suggest you look at semantics when it comes to HTML. That should not be inside a table at all. By the looks of it you're using a form as a search box so why not mark it up using a form tag?

I would also suggest you look into CSS Resets if you haven't already:

http://meyerweb.com/eric/tools/css/reset/

They are extremely useful and give you a nice blank canvas to start coding with. If all else fails make sure you have a valid doctype! One other thing to note is the way IE differs in it's implementation of the box model:

http://www.w3.org/TR/CSS2/box.html

Answer 3

You could apply an IE css hack:

height: 26px;
*height: 27px;