CODEWITHSUNDEEP
htmlcss
markzzz
markzzz

Reputation: 47945

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:#7c7c7c;
    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?

Upvotes: 0

Views: 591

Answers (1)

MatTheCat
MatTheCat

Reputation: 18721

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

Upvotes: 1

Related Questions