Попытка выяснить, почему эти плавающие LI не выравниваются в IE7 - PullRequest
Новая
       16

Попытка выяснить, почему эти плавающие LI не выравниваются в IE7

0 голосов
/ 18 февраля 2012

Вот эта страница: [отредактировано]

Меню отлично выглядит в Firefox, Safari, Chrome и IE8 +.Но в IE7 LI располагаются вертикально.Вы можете скачать IETester, если у вас его еще нет, чтобы понять, что я имею в виду.

Вот мой HTML: 

<ul id="menu">
    <li class="you"><a href="">You</a></li>
    <li class="us"><a href="">Us</a></li>
    <li class="contact"><a href="">Contact</a></li>
    <li class="insurance"><a href="">Insurance</a></li>
    <li class="services"><a href="">Services</a></li>
    <li class="blog"><a href="">Blog</a></li>
</ul>

И соответствующий CSS: 

#header #menu {
    position: absolute;
    bottom: 40px;
    right: 22px;
    float: right;
}

#menu,
#menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}


#menu li {
    float: left;
}

#menu a {
    display: block;
    float: right;
    width: 76px;
    height: 25px;
    padding: 45px 0 5px 0;
    text-align: center;
    text-decoration: none;
    color: #555;
    font-size: 90%;
    border: 1px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#menu .you a {
    background: url(img/icon_you.gif) center 9px no-repeat;
}

#menu .blog a {
    background: url(img/icon_blog.gif) center 9px no-repeat;
}

#menu .us a {
    background: url(img/icon_us.gif) center 9px no-repeat;
}

#menu .insurance a {
    background: url(img/icon_insurance.gif) center 9px no-repeat;
}

#menu .contact a {
    background: url(img/icon_contact.gif) center 9px no-repeat;
}

#menu .services a {
    background: url(img/icon_services.gif) center 9px no-repeat;
}

#menu a:hover {
    background-color: #f6f5f3;
    border: 1px solid #e5e2dd;
    color: #2871ad;
}

Любые идеи с благодарностью.

Ответы [ 2 ]

2 голосов
/ 18 февраля 2012

Определить ширину для каждого элемента li.

1 голос
/ 18 февраля 2012

Не используйте свои A -метки. Ты уже плаваешь в обертке LI. Кроме того, не забудьте очистить свои поплавки в конце списка.

...