リストタグを用いた段組みメニューの不具合（IE6）

質問

数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。
リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、
IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。
他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。

以下がhtmlとcssです。

【html】
<div class="test">

<div class="test_left">
<h3>テスト1</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

<div class="test_right">
<h3>テスト2</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

<div class="search_clear"></div>

<div class="test_left">
<h3>テスト1</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

<div class="test_right">
<h3>テスト2</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

</div>

【css】
div.test {
width: 500px;
height: 370px;
margin: 15px 0 10px 0;
}

div.test h3 {
width: 220px;
font-size: 16px;
margin: 10px 10px 0 20px;
}

div.test ul {
width: 220px;
margin: 0 10px 15px 10px;
list-style:none;
}

div.test ul li {
width: 220px;
display:inline;
}

div.test ul li a {
color: #666;
}

div.test ul li a:hover {
color: #999;
}

.test_clear {
clear:both;
}

.test_left {
float: left;
width: 240px;
}

.test_right {
float: right;
width: 240px;
}

仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、
何卒宜しくお願い致します。

回答No.3

hinananana · ベストアンサー

No.1さんと言うとおり
div.test ul li {
width: 220px;
display:inline;
}

width:220px;は必要ありません。

liのwidthが220pxで
ulのwidthも220pxなら収まりませんよね。

表示がおかしい時に

div.test ul li {
width: 220px;
display:inline;
border:solid 1px;
}

ボーダーを入れて見た方が何が問題なのかわかりやすくなります。

お礼

その通りでした。
問題を分かりやすくする方法もご教授下さり感謝しています！

素早いご回答本当に有難う御座いました！

回答No.2

noname#138976

<!--[if lte IE 6]>IE6では表示が乱れる可能性があります。<![endif]-->
と、書いてIE６を無視する。ワタシはIE６が無いので無視してます。
あるいは、
<!--[if lte IE 6]>ここにie6用のｃｓｓを書く<![endif]-->

お礼

ハックは使用していたのですが上手く行かなかったのです。
素早いご回答有難う御座いました！

回答No.1

yambejp

div.test ul li {
width: 220px; ←これがいらなくないですか？
display:inline;
}

お礼

その通りでした。
素早いご回答本当に有難う御座いました！