掲示板/スタイルシート質問板/過去ログ/一覧/ IEのみ、リストがうまく表示されない。

0 名前： ササキ ： 2006/05/25（木） 13:47 ID:oWbo8oF/: 現在IEのみにて、回避方法がわからない不具合があるため、質問させていただきます。

Windows版　IE6　(Mac版IEやSafari,Netscape,Firefoxなどでは、問題なし)
XHTML + CSS

問題点
・リストを使用してヤフーのカテゴリの様な表（背景が青と白のシマ模様の所）を
　制作したものの２行になった場合、背景色用のdivが伸びずにulがはみ出してしまう。
・文字がかぶってしまう
試みた事
・それぞれulの終わりに<br clear="all">を挿入（floatが問題だと思っていたので）
・divをdisplay="block"にしてみる（これは試しにやってみましたが、関係ありませんでした）
・ulの幅を、少し短めに設定
その他
・表示は、ヤフーのカテゴリの様な表とほぼ同じですが、それぞれのタイトルは
　h3タグです。
・li自体はdisplay="inline"でfloatを使用せずに横に並べています。

以下ソースです//////////////

<div id="top01">
<div class="top01a">
<h3>キレイ系</h3>
<ul>
<li><a href="/" title="美容院">美容院</a></li>
<li><a href="/" title="エステサロン">エステサロン</a></li>
<li><a href="/" title="ネイルサロン">ネイルサロン</a></li>
<li><a href="/" title="美容外科">美容外科</a></li>
<li><a href="/" title="育毛">育毛</a></li>
</ul>
<br clear="all" />
</div>
<div class="top01b">
<h3>健康系</h3>
<ul>
<li><a href="/" title="アレルギー科">アレルギー科</a></li>
<li><a href="/" title="産婦人科">産婦人科</a></li>
<li><a href="/" title="矯正歯科">矯正歯科</a></li>
<li><a href="/" title="夜間診療">夜間診療</a></li>
<li><a href="/" title="フィットネス">フィットネス</a></li>
</ul>
<br clear="all" />
</div>
<div class="top01a">
<h3>趣味系</h3>

・
・
・
・
</div>

CSS部分///////////////
div#top01{
width:548px;
border:1px solid #3399FF;
margin-bottom:10px;
}

div#top01title{
height:28px;
border:1px solid #3399FF;
background-image:url(img/top01_titleback.gif);
background-repeat:repeat-x;
}

div.top01a{　　　　/*/////伸びないdivはここです/////*/
background-color:#DDF1FC;
padding:2px;
text-align:left;
display:block;

}

div.top01b{　　　/*/////伸びないdivはここです/////*/
padding:2px;
text-align:left;
display:block;

}

div#top01 ul{
float:left;
width:460px;
list-style:none;
display:inline;
padding-left:3px;
}

div#top01 ul li{
list-style:none;
display:inline;
background-image:url(img/top01_icon01.gif);
background-repeat:no-repeat;
background-position:3px;
padding-left:20px;
margin-left:5px;
}

h3{
width:60px;
float:left;
padding:0px;
margin:0px 5px;
font-weight:bold;
color:#000099;
font-size:small;
}

長くなりまして本当にすみません、私の方の設定が間違っているのでしょうか？
何かアドバイスがありましたら、是非お聞かせいただきたいです。

1 名前： ササキ ： 2006/05/25（木） 13:47 ID:oWbo8oF/: すみません、打開策が見つかりました。

div.top01b:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.top01b {display: inline-table;}

/* Hides from IE-mac \*/
* html .top01b {height: 1%;}
.top01b {display: block;}
/* End hide from IE-mac */

この方法を使用しました。
ご迷惑をおかけし、申し訳ございませんでした
ありがとうございました