IE6でナビ下に隙間ができてしまいます。
横並びのナビの下に隙間無く内容を入れたいのですが、IE6だとナビ下に２ミリ位の隙間ができてしまいます。
いろいろ調べてIE6対策でline-height: 0・margin: 0を追加してもうまくいきません。
何が間違っているのか、ご支持お願いします。
<body>
<div id="wrapper">
<div id="headnavi">
<ul>
<li id="A"><a href=""><span>A</span></a></li>
<li id="B"><a href=""><span>B</span></a></li>
<li id="C"><a href=""><span>C</span></a></li>
<li id="D"><a href=""><span>D</span></a></li>
<li id="E"><a href=""><span>E</span></a></li>
<li id="F"><a href=""><span>F</span></a></li>
</ul>
</div><!-- / #headnavi -->
<div id="pro_back">
<p>○○○○○</p>
</div><!-- / #pro_back -->
</div><!-- / #wrapper -->
</body>
</html>
*{
margin: 0px;
padding: 0px;
font-weight: normal;
list-style-type:none;
}
body {
width: 100%;
font-size: 75%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 180%;
color: #333;
}
#wrapper {
position: relative;
width: 960px;
margin-left:auto;
margin-right:auto;
}
#pro_back {
width: 960px;
height: 623px;
background-image: url(images/pro_back.gif);
background-repeat: no-repeat;
margin: 0;
}
#headnavi {
width:960px;
height: 33px;
margin: 0;
}
#headnavi ul {
line-height: 0;
margin: 0;
}
#headnavi ul li a {
display: block;
width: 172px;
text-decoration: none;
height: 33px;
}
#headnavi ul li a span {
position: absolute;
width: 0;
height: 0;
padding: 0;
overflow: hidden;
}
ul li#A a {
position: absolute;
left: 890px;
top: 0px;
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(images/topbotan.gif);
margin: 0;
}
ul li#B a {
position: absolute;
left: 632px;
top: 0px;
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(images/link.gif);
margin: 0;
}
ul li#C a {
position: absolute;
left: 474px;
top: 0px;
background-repeat: no-repeat;
background-image: url(images/mail.gif);
margin: 0;
}
ul li#D a {
position: absolute;
left: 316px;
top: 0;
background-repeat: no-repeat;
background-image: url(images/illustration.gif);
margin: 0;
}
ul li#E a {
position: absolute;
left: 158px;
top: 0;
background-repeat: no-repeat;
background-image: url(images/designwork.gif);
margin: 0;
}
ul li#F a {
position: absolute;
left: 0px;
top: 0;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url(images/profile.gif);
margin: 0;
}
