CSS、floatとclearの併用でIEのみ他と違う表示

質問

リストの表示で、
dtとそれに続くddの組を１行ずつで表示させたいと思います。

DOCTYPEはHTML4.01 Transitionalです。

<dl>
<dt>Windows</dt><dd>IE6.0</dd><dd>Firefox1.5</dd><dd>Opera8.5</dd><dd>Netscape7.1</dd>
<dt>MacOS</dt><dd>Safari1.2</dd><dd>Firefox1.5</dd><dd>Opera8.5</dd><dd>Netscape7.1</dd>
<dt> </dt><dd>補足事項１</dd>
<dt> </dt><dd>補足事項２</dd>
</dl>

<style>
dt {
clear:left;
float: left;
}
dd {
float:left;
}
（その他margin等の指定あり）

とすると、FirefoxやOperaではWindows、MacOS、補足事項の各行に分けられて表示されますが、
IE6ではdtのみ改行された表示になり、ddはすべて、Windowの行に１行で表示されてしまいます。

とりあえずの対策として、
td{ _float:none; }
を指定して、強制的に改行していますが、
これでは補足のところの が改行されて、浮いてしまいます。

dtの直前で改行、ddの後ろとddの前は改行なし、という表示は出来ない物でしょうか？
テーブルでの表示、および、display:inlineにして<br>を入れるのはNGとさせてください。

<dd style="clear:left;"> </dd>
を入れても、表示は変わりませんでした。

目標とする表示
Windows　IE6.0　Firefox1.5　Opera8.5　Netscape7.1
MacOS　Safari1.2　Firefox1.5　Opera8.5　Netscape7.1
　補足事項１
　補足事項２

回答No.2

kaiwarepon · ベストアンサー

> display:inlineにして<br>を入れるのはNG
display:inlineにして<br>は使わないのであればOKでしょうか？

<style type="text/css">
<!--
ul {
list-style:none;
}
ul li ul, ul li ul li {
display:inline;
}
.fl {
float:left;
}
.cl {
clear:left;
}
.ti {
text-indent:1em;
}
-->
</style>

<ul>
<li class="fl">Windows
<ul>
<li>IE6.0</li>
<li>Firefox1.5</li>
<li>Opera8.5</li>
<li>Netscape7.1</li>
</ul>
</li>
<li class="fl cl">MacOS
<ul>
<li>Safari1.2</li>
<li>Firefox1.5</li>
<li>Opera8.5</li>
<li>Netscape7.1</li>
</ul>
</li>
<li class="cl ti">補足事項１</li>
<li class="cl ti">補足事項２</li>
</ul>

お礼

確認できました。

<dt>と<dd>を区別することで２種類のスタイルを使い分けていましたが、
入れ子にすることでclassを指定しなくても区別させることが出来そうですね。
補足事項についても対応していただき（空白リストを消す）ありがとうございました。

HTMLを簡略化しつつ（入れ子にせずに）目的の表示になりそうな案が出ることを期待しつつ、
あと数日、終了させずにおいておきたいと思います。

なお、floatを使うと翻訳サイトを通じてアラビア語で表示すると右寄せにならない、
という弊害があるのは存じていますが、
今回は翻訳サイトを通じた表示は考えない方向で進めています。

ありがとうございました。

回答No.1

partita

<dl>
<dt>Windows</dt><dd>IE6.0 Firefox1.5 Opera8.5 Netscape7.1</dd>
<dt>MacOS</dt><dd>Safari1.2 Firefox1.5 Opera8.5 Netscape7.1</dd>
<dt> </dt><dd>補足事項１</dd>
<dt> </dt><dd>補足事項２</dd>
</dl>

このようなHTMLではダメ？

お礼

HTMLの意味合いからも１行ずつ分けたかったため、
また、音声ブラウザでは一気に読み出されてしまう可能性があるため（音声ブラウザでは未確認ですが）
１つの項目に入れるのはさけたかったのです。

今回使用しているページではAjaxを使っているので、利用ブラウザが限られますが、
このリストの書き方自体は、（ブラウザリストだけでなく）ほかのリストの書き方にも応用できると思いますから。

ありがとうございました。