IE6では単純なナビゲーションバーが動作しませんか？

Question

私は自分のウェブサイトに移動するために水平ナビゲーションバーを作っていますが、IE6では正しく表示されません。

これは本当に簡単なナビゲーションバーで、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

ではなくinline-blockのblockとfloatを試してみてください。

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

ULの後に必ずフローティングをクリアしてください。

Answer 2

あなたの2つの負のマージンに困惑しました。

少なくとも最初のものは、メニューを動かすために使用しているように見えますが、負のマージンでは問題を解決してはいけません。

2番目のマイナスのマージンは、メニューが壊れてしまっても意味がありません。

少なくとも2つの負のマージンがあるため、物事が正しく表示されません。 （あなたの質問の問題は必ずしも問題ではありませんが、確かに問題です。）

これらを取り除くべきです。

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

編集：私はマイナスマージンを使用していることに気付きたいと思います。コードを修正してコードを修正できる場合、負のマージンで修正するのはあまり生産的ではありません。それはいくつかの問題を引き起こすかもしれません。