Problem with a text input being pushed down

[Jhorra]

I have a ul I'm using as header links, and inside one is a text input. For some reason this input is being pushed down. Here is the affected area. I've also attached an image of the issue. Putting a negative margin on the top seemed to fix the issue in IE, but no other browser.

<ul id="links_ul">
    <li>
        <a id="LinkButton1" href="#">HOME</a>
    </li>
    <li>
        <a id="LinkButton2" href="#">BROWSE</a>
    </li>
    <li>
        <a id="LinkButton4" href="#">LOGIN</a>
    </li>
    <li>
        <a id="LinkButton5" href="#">JOIN</a>
    </li>
    <li>
        <input name="search_textbox" type="text" id="search_textbox" />
    </li>
</ul>

#links_ul
{
    height:37px;
    padding:0px;
    margin:0px;
    line-height:37px;
    list-style:none;
    background:#000000 url(http://urlremoved.com/uploads/layout_images/header_bg.png) no-repeat;
}
#links_ul li
{
    padding:0px;
    float:left;
    margin:4px 0px 4px 4px;
    list-style:none;
}

#links_ul li a
{
    color:#FFFFFF;
    text-align:center;
    text-decoration:none;
    display:block;
    height:29px;
    line-height:29px;
    font-weight:bold;
    width:104px;
    background:#000000 url(http://urlremoved.com/uploads/layout_images/button.png) no-repeat;
}

#links_ul li input
{
    height:22px;
    margin:0px;
    padding:0px;
}

[Paul O'B]

Hi,

It's pushed down because of the line-height you set ion the ul. Remove the line-height and set a margin on the input.

e.g.

#links_ul {
    height:37px;
    padding:0px;
    margin:0px;
    /*line-height:37px;*/
    list-style:none;
    background:#000000 url(http://urlremoved.com/uploads/layout_images/header_bg.png) no-repeat;
}
#links_ul li input {
    height:22px;
    margin:1px 0 0;
   padding:0px;
    vertical-align:middle
}

Note that IE and Firefox are always about 1px out with their alignment on inputs so you will need to hack IE if you want it pixel perfect.

[Jhorra]

Doh! I thought I had removed that. Thanks.