Простая панель навигации не работает в IE6?

Question

Я сделал горизонтальную панель навигации, чтобы перейти на мой сайт, и она не отображается правильно в IE6.

Это действительно простая панель навигации, и я не знаю на 100%, что работает, а что нет в IE6.

Может кто-нибудь увидеть что-то не так с моим CSS?

Спасибо

HTML:

<div id="controlslider">
    <ul>
        <li><a href="#slider2">Work, Life: Balanced.</a></li>
        <li><a href="#slider3">Mobilise your workforce.</a></li>
        <li><a href="#slider4">Built for business.</a></li>
        <li><a href="#slider5">Work whenever, wherever.</a></li>
        <li><a href="#slider6">Where to buy.</a></li>
    </ul>
</div>

CSS:

#controlslider{
    width: 981px;
    height: 50px;
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu.gif) no-repeat;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    margin-top: -25px;
    list-style: none;
    overflow: hidden;
}
#controlslider ul{
    list-style: none;
    display: block;
    margin-left: -36px;
    margin-top: 0;
    list-style-type: none;
}
#controlslider li{
display: inline-block !important;
padding: 5px 0px 0 0;
width: 190px;
height: 35px;
position: relative;
overflow: hidden;
}
#controlslider li a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color : white;
    text-decoration: none;
    display: block !important;
    width: 190px;
    height: 35px;
    text-align: center;
    padding-top: 10px;
}
#controlslider li a:hover{
    background: url(http://s361608839.websitehome.co.uk/images/respmod_menu_button.png);
    width: 190px;
    height: 35px;
}

Answer 1

Попробуйте block и float вместо inline-block.

#controlslider li{
   display: block !important;
   float: left;
   padding: 5px 0px 0 0;
   width: 190px;
   height: 35px;
   position: relative;
   overflow: hidden;
}

Обязательно очистите плавающий после UL.

Answer 2

Я озадачен вашими двумя отрицательными краями.

По крайней мере, первый, кажется, имеет некоторую логику, поскольку вы, кажется, используете его для перемещения меню вверх, но вы никогда не должны исправлять проблемы с отрицательными полями.

Второе отрицательное поле просто не имеет смысла для меня, поскольку оно портит меню.

Вещи не отображаются должным образом, по крайней мере, из-за тех двух отрицательных полей, которые у вас есть.(не говоря уже о том, что проблема в вашем вопросе, но это точно проблема.)

Вы должны избавиться от них.

#controlslider{
        margin-top: -25px;
}
#controlslider ul{
        margin-left: -36px;
}

Редактировать: Я хотел бы отметить, что яолл-ин за использование отрицательных полей.Дело в том, что если код можно исправить, уточнив код, не очень продуктивно исправлять его с отрицательными полями.Что может даже привести к некоторым проблемам.