Проблема с горизонтальным меню навигации CSS в IE6

Question

У меня есть вопрос.У меня есть горизонтальное меню навигации, созданное в официальном учебнике CSS.Вот CSS:

div.horizontal
{
width:700px;
height:30px;
margin:0 auto;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
position:relative;
padding-left:20px;
padding-right:20px;
padding-top:18px;
padding-bottom:0px;
}
div.horizontal a:link,div.horizontal a:visited
{

white-space: nowrap;
height: 40px;
line-height: 15px;
font-weight: normal;
font-size:12px;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
z-index: 100;
color: #fff;
cursor: pointer;
font-family:"Trebuchet MS", Arial, sans-serif;
}
div.horizontal a:hover,div.horizontal a:active
{
    background-image:url(images/horiz-menu-active.png);
    background-repeat:repeat-x;
color:#FFF;
}

HTML:

<div class="horizontal">
            <ul>
                <li><a href="contacts.php">За контакти</a></li>
                <li><a href="comments.php">Мнения и коментари</a></li>
                <li><a href="media_center.php">Медиа Център</a></li>
                <li><a href="news.php">Новини</a></li>
                <li><a style="border-right:2px #900 solid;" href="aboutus.php">За нас</a></li>
            </ul>
</div>

Во всех браузерах, включая IE7 и IE8, он выглядит нормально, как я хочу, но в IE6 он вертикальный.Пожалуйста, дайте мне несколько советов, что делать?

Живой пример здесь: jsfiddle.net / uhRzR

Answer 1

Просто замените эту часть вашего CSS

div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
position:relative;
padding-left:20px;
padding-right:20px;
padding-top:18px;
padding-bottom:0px;
}

с этим

div.horizontal li
{
display:inline;
}
div.horizontal a
{
padding:18px 20px 0px 20px;
}

Answer 2

Я могу предложить вам исправить эту проблему для ie6, добавив фиксированную ширину для div.horizontal li

Пример: http://jsfiddle.net/uhRzR/2/ <- В этом примере я добавил ширину 100px.</p>

---

Альтернативное решение - использовать хак CSS для Internet Explorer, добавив _width:0px; для div.horizontal li

Пример: http://jsfiddle.net/uhRzR/5/