フロートするとメニューが落ちる IE6で不可

質問

以下のようなhtmlを作成し、CSSを適用しました。
メニューを作成する為に、120×50のメニューボタンを横並びにする為、
フロートを使ったのですが、
FireFoxでは正常に表示されるのですが、
IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。
どうすればいいのでしょうか。

■html
<div id="wrapper">

<div id="header">

<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>

</div>

<div id="left">
</div>

<div id="right">
</div>

<div id="footer">
</div>

</div>

■CSS
body {
text-align:center;
font-size:small;
}

#wrapper {
text-align:left;
margin:0 auto;
width:600px;
}

#header {
}

#left {
float:left;
width:200px;
}

#right {
float:left;
width:400px;
}

#footer {
clear:both;
}

#header li a {
display:block;
float:left;
width:120px;
height:50px;
}

回答No.1

leap_day · ベストアンサー

こんにちは

レイアウトはborderをつけたりbackground-colorをつけたりすることでどのような状態になっているか確認すると分かりやすいですよ

ブラウザの<li>のheightの解釈の違いとfloatの特性によってそのような状態になってます
floatすると実質の高さは0になりますが

<style type="text/css"><!--
li { background-color:blue; height:0px;}
--></style>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

とするとIEとFirefoxで表示が違います
これにfloat:left;の特性
左上から配置していく
前のfloatに当たるとそこから配置していく
が重なってそういった状態になってます

リストフロートの場合は<li>の中身ではなく<li>をfloatしてやります

#header ul {
margin:0px;
padding:0px;
list-style:none;
}
#header li {
float:left;
}
#header li a {
dosplay:block;
width:120px;
height:50px;
}

お礼

aではなく、liをフロートする事で解決しました。
ありがとうございました！
所で、なぜaをフロートするとボックスが落ちてしまうのでしょうか・・。

回答No.2

yambejp

>なぜaをフロートするとボックスが落ちてしまうのでしょうか・・。

この場合、aはliの子要素ですから、親を無視して横並びにしようとすると
親に邪魔されるのでしょう