スタイルシートをめぐる冒険

CSSトラブルシューティング / 定義リスト関連

マージンを使ってdtとddを横並びにするとdtが消える

定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あるとき、IE7で見たらdtがすっかり消えていて、あわてたことがある。原因は、またしても、その定義リストを含むボックスへの背景画像の指定だった。
[該当するブラウザ]
Windows／IE7.0以下

症状

たとえば、年表のようなリストを角マルの矩形で囲むレイアウトを組んだとする（右図）。
角マル矩形は、
frame_top.gif（トップの部分）、
frame_bg.gif（中間部分）、
frame_btm.gif（ボトムの部分）、
以上3つの画像を、dlおよびdlを含むボックスに背景として指定することで実現している。詳細は以下の通りである（→サンプルページ1）。

【スタイルシート】

body {
	margin: 10px;
	padding: 0;
}
.box {
	width: 223px;
	background: url(frame_btm.gif) no-repeat bottom;
	padding-bottom: 13px;
}
.box-inner { background: url(frame_bg.gif) repeat-y; }
dl {
	background: url(frame_top.gif) no-repeat top;
	padding: 13px 14px 0;
	font-size: small;
	line-height: 1.6em;
	margin: 0;
}
dd { margin: -1.6em 0 0 4em; }

【HTML】

<div class="box">

<div class="box-inner">

<dl>

<dt>1991年</dt>

<dd>湾岸戦争<br />

ソ連邦、解体</dd>

<dt>1992年</dt>

<dd>マーストリヒト条約、調印</dd>

<dt>1997年</dt>

<dd>香港が中国に返還される</dd>

<dt>2001年</dt>

<dd>アメリカ同時多発テロ</dd>

<dt>2003年</dt>

<dd>イラク戦争</dd>

</dl>

</div>

</div>

そして、これをIE7で表示させた場合のスクリーンショットがこちら。このように、見事にdtがきれいさっぱり消えてしまう。

原因

冒頭に書いたとおり、原因は定義リストを含むボックスへの背景画像の指定にある。今回の例の場合、具体的には、
.box-inner { background: url(frame_bg.gif) repeat-y; }
この1行が犯人であり、これを削除してしまえば、dtが消えることはない（→サンプルページ2）。

対策

対処法は、やはり、マージンの調整による横並びレイアウトは使わないこと、これに尽きる。「dlを含むボックスに背景画像を指定すると背景画像が繰り返される」では、floatを使ったので、今回はpositionを使った方法を紹介しよう（→サンプルページ3、floatを使った方法はサンプルページ4）。

【スタイルシート】

body {
	margin: 10px;
	padding: 0;
}
.box {
	width: 223px;
	background: url(frame_btm.gif) no-repeat bottom;
	padding-bottom: 13px;
}
.box-inner { background: url(frame_bg.gif) repeat-y; }
dl {
	background: url(frame_top.gif) no-repeat top;
	padding: 13px 14px 0;
	font-size: small;
	line-height: 1.6em;
	margin: 0;
}
dt {
	width: 4em;
	position: absolute;
	left: 24px;
}
dd { margin-left: 4em; }

【HTML】
変更なし

なお、IE7では、dlとその上位のボックス（.box-inner）に対する背景画像の指定を変更し、dlに枠線の中間部分（flame_bg.gif、またはボーダー）、.box-innerに枠線のトップ部分（frame_top.gif）、という指定にすれば、マージンを使った横並びレイアウトでもdtは消えない。しかし、どちらにしてもIE6では表示の乱れがあるので詳細は省略する。

(last modified: 09/26/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/110