How to align these label/input box/botton on IE7

This you can find a Fiddle example, and here is the code :

<div class="menu-alto">
    <ul>
        <li>
            <a title="Link" href="#">Link</a>
        </li>

        <li class="newsletter">
            <a title="Newsletter" href="#">Newsletter</a>
        </li>
        <li class="last">
            <label style="color:#99cc00">cerca&nbsp;</label>
            <input type="text" style="width:116px;" />
            <input type="submit" style="width:40px;" class="bottone" value="VAI" />
        </li>
    </ul>
</div>

.menu-alto ul
{
    list-style:none;
    padding:0;
    margin:0;
    border:0;
}

.menu-alto li
{
    display:block;
    float:left;
    font-family:Arial;
    text-transform:uppercase;
    color:#7c7开发者_如何学编程c7c;
    font-size:10px;
    padding-right:16px;
}

.menu-alto li a:link,
.menu-alto li a:visited
{
    color:#7c7c7c;
    text-decoration:none;
    letter-spacing:1px;
}

.menu-alto li a:hover
{
    text-decoration:underline;
}

.menu-alto .last
{
    padding-left:5px;
    position:relative;
    top:-5px;
}

.menu-alto .bottone
{
    position:relative;
    top:2px;
    height:21px;
    font-size:11px;
}

As you can see (just on IE7) the label with the text CERCA is not align (as middle) with the other links, and on Chrome (for example) the button is in the botton of the vertical-middle align. How can I fix this?

---

You should vertically center using vertical-align:middle; on all your <li> children instead of using relative position.