IE6以下でメニューリストの下に隙間が入ります

質問

お世話になってます。
あるサイトをCSSで作製しているのですが、メニューリストの下にIE6以下だと余計な余白？が入ります。
他のブラウザやIE7では大丈夫です。

http://takeoff-agp.beautypal.net/sample/test/test.html

ここにサンプルを載せました。

CSSは・・・

* {
font-style: normal;
border: 0;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,p {
margin: 0px;
padding: 0px;
}
body {
text-align: left;
color: #505050;
background: #FFFFFF;
font-family: "Meiryo", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Osaka, sans-serif;
font-size: 12px;
line-height: 1.7;
}
#wrapper {
text-align: left;
width: 880px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-y;
background-image: url(../images/bg-wrapper.gif);
}
#header {
height: 110px;
width: 860px;
background-image: url(../images/bg-header.gif);
background-repeat: no-repeat;
margin-right: 10px;
margin-left: 10px;
border-bottom: 3px groove #999999;
}
#header h1 {
margin-left: 10px;
}
#topnavi {
height: 30px;
width: 860px;
border-bottom: 1px solid #990033;
border-top: 1px solid #990033;
margin-right: 10px;
margin-left: 10px;
}
#topnavi ul {
list-style: none;
}
#topnavi ul li {
float: left;
height: 30px;
}
#topnavi ul li a {
float: left;
height: 30px;
}

です。

javascriptでロールオーバーしています。

<a>にfloat: left;とheight: 30px;を入れてる為、二番目のボタンに<a>を入れると直ります。
ですが、現在いるページに<a>をつけるのはおかしいですよね？＾＾；

分かりずらい文章で大変申し訳ございませんが、とても困っているので、宜しくお願いします。

回答No.1

abril · ベストアンサー

liに対してoverflowプロパティで高さ（height: 30px;）をはみ出す分をカット：

#topnavi ul li {
float: left;
height: 30px;
overflow: hidden;←追加
}

あるいは、liの子要素のimgに対して以下の指定を追加：

#topnavi ul li img {
vertical-align: bottom;
}

の、いずれかの方法でIE6での結果を同じにする事が可能です。

ちなみに、現状のスタイルであれば、

#ul li a {
float: left;
height: 30px;
}

は、不要です。aはブロック要素ではないのでこのままではheightプロパティは適用されませんし、フロートさせる必要もありません。

お礼

有り難うございます！！！
出来ました！！！
凄いです！！感動しました！！
ずっと悩んでいたので本当に助かりました。
やはりプロの方は違いますね。
泣きそうですw
有り難うございました！！

回答No.2

mezashi2000

CSSではなくHTML側に以下のコメント用タグを試してみてください。

<ul>
<li id="tn1">…</li><!--
--><li id="tn2">…</li><!--
--><li id="tn3">…</li><!--
--><li id="tn4">…</li><!--
--><li id="tn5">…</li><!--
--><li id="tn6">…</li>
</ul>

これで回避できると思います。

お礼

早速のご回答有り難うございます！
この方法は調べた時に出てきました。
サンプルが縦並びでした。
早速試したのですが、余白は回避できませんでした・・・
横並びだと効かないんですかね＾＾；