こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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>補足事項1</dd>
<dt> </dt><dd>補足事項2</dd>
</dl>

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

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

とりあえずの対策として、
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
 補足事項1
 補足事項2

投稿日時 - 2006-06-21 16:28:56

QNo.2229475

暇なときに回答ください

質問者が選んだベストアンサー

> 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">補足事項1</li>
<li class="cl ti">補足事項2</li>
</ul>

投稿日時 - 2006-06-21 18:56:59

お礼

確認できました。

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

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

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

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

投稿日時 - 2006-06-21 22:29:08

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

<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>補足事項1</dd>
<dt> </dt><dd>補足事項2</dd>
</dl>

このようなHTMLではダメ?

投稿日時 - 2006-06-21 17:17:17

お礼

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

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

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

投稿日時 - 2006-06-21 22:18:14

あなたにオススメの質問