floatさせたdtの内容が多い場合、ddの背景と高さが合いません

サイトの新着情報を<dl><dt><dd>で組んでいます。
罫線の上に左に画像、右に日付と新着内容が並んでいるように
見せたいのですが、<dt>を左にfloatし<dd>を回り込ませ、
<dd>に罫線の画像を背景で設定た場合、<dd>の内容が少ない時、
罫線画像が左の<dt>の画像と高さが合いません。
<dd>にClearfixを設定すると、モダンブラウザでは<dt>の高さと
<dd>の罫線画像の高さが合い、希望通りの表示になりました。
しかし、IE6と7ではモダンブラウザと同じ表示にはなりません。

float以外の方法でも構いませんので、IE6以降とモダンブラウザ
ともに<dl><dt><dd>で上記希望の表示を実現させる方法がありましたら、
アドバイス頂けないでしょうか、よろしくお願いしますm(__)m

ソースは以下になります。

[HTML]
<dl class="news">
<dt><img src="img/photo.jpg" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。</a></dd>
<dt><img src="img/photo.jpg" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。</a></dd>
<dt><img src="img/photo.jpg" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
新着情報のテキストが入ります。</dd>
</dl>

[CSS]
#index dl.news {
padding: 8px 15px;
border: #999 1px solid;
}

#index dl.news dt {
width: 50px;
float: left;
clear: left;
}

#index dl.news dd {
margin: 0 0 6px;
padding: 0 0 8px 57px;
background: url(../img_cmn/linet.gif) repeat-x bottom;
line-height: 125%;
}
#index dl.news dd:after {/* clearfix */
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}

No.1 回答者： noname#83877 回答日時： 2009/02/12 17:01

面白い指定だと思いますが、floatに限らずボックスの横並びはIEで下の方を揃えるのは難しいです。

dlはそれなりに使用に制限が出やすい要素なので・・・

ちょっと別の方法で試してみました。
一部html等追記する部分もありますが、スタイルは実現できていると思います。(画像がないのでボーダーで指定しています。適宜変えてみてください)


#index div.news {
width:800px;
border: #999 1px solid;
}

#index div.news dl {
padding: 8px 15px;
}

#index div.news dt {
display:inline;
width: 107px;
margin:0 0 6px;
border-bottom:1px solid #000;
vertical-align:bottom;
}
html>/**/body #index div.news dt {
display:-moz-inline-box !important; /* firefox2以下 */
display:inline-block !important;
}
#index div.news dt img {
padding-right:57px;
display:inline;
}
#index div.news dd {
display:inline;
background:#f00;
width:653px;
border-bottom:1px solid #000;
margin: 0 0 6px;
padding: 0 0 8px 0;
line-height: 125%;
vertical-align:bottom;
}
html>/**/body #index div.news dl dd {
display:-moz-inline-box !important; /* firefox2以下 */
display:inline-block !important;
}



<div class="news">
<dl>
<dt><img src="img/photo.jpg" width="50" height="50" alt="あああああああああああああ" /></dt><!--
--><dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。</a></dd>
<dt><img src="img/photo.jpg" width="50" height="50" alt="a" /></dt><!--
--><dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。</a></dd>
<dt><img src="img/photo.jpg" width="50" height="50" alt="a" /></dt><!--
--><dd><span>2009.01.01</span><br />
新着情報のテキストが入ります。</dd>
</dl>
</div>


firefox2やモダンブラウザに対応するため、一部vaildでない記述になっています。
できればモダンブラウザ用の指定のhtml>/**/bodyを追加せずに指定し、条件付コメントを利用してのIEに別のスタイルをあてる使用をオススメします。

この回答への補足

お礼で他にも影響を与えている設定を…と申し上げましたが、
この質問が解決致しましたので、質問を締め切らせて頂きます。

親切にアドバイス頂きまして、どうもありがとうございました。

補足日時：2009/02/12 20:27

この回答へのお礼

altの補足までご丁寧にありがとうございます。

display:inline;の設定など参考になりました。
hackなども知識が浅いので、勉強になります。ありがとうございます。

このまま、このソースを使わせて頂いたのですが、
画像と日付と新着内容がバラバラに配置されてしまいました。
＃1さんが他にCSSリセットなどされていて、その影響で
きれいに配置されているとしたら、良ければこのソース以外に
影響を与えている設定もご掲載頂けると有難いですm(__)m

お礼日時：2009/02/12 19:04

No.2 回答者： noname#83877 回答日時： 2009/02/12 17:06

altの値は適当です。

消し忘れていました・・・
xhtmlではalt必須なので、特にdlのような定義リストの時は何か書いておいてください。

No.3 回答者： KI401 回答日時： 2009/02/12 17:39

回答と直接の関係はありませんが、マークアップについて。

直接関係はないので、読まなくてもいいです。
# 恐らくレイアウトに関しては#1さんの方法で行けるかと。

dlはDefinition List、つまり定義リストですよね。
dtはDefinition Term、定義語で、
ddはDefinition Description、定義（の説明）です。

しかし質問者さんのマークアップでは、"photo.jpg"という画像（altテキストなし）が
定義語句で、それに対する説明文が「新着情報」になっています。
複数の同じ画像に別々の「定義」が与えられているのは変ですよね？
# 恐らくphoto.jpgは「NEW!」とかの類の画像だと思いますが・・・。

dl要素は「定義」でなくても、語句と説明がセットになっているような場合は
拡大解釈してマークアップしてもいいと決められているので、
更新履歴のような場合にdlを使うのは良いことだと思います。
僕も、更新履歴は「更新した日付」と「更新した内容」がセットになっている、
と考えて更新履歴をdl要素、日付をdt、更新内容をddでマークアップし、
dt要素の背景画像としてCSSで「NEW!」の画像を設定するようにしています。
# もう一つ、表として捉えるのもアリですね。

これはあくまで僕は更新履歴を論理的にこう捉えている、というだけの話です。
論理要素によるマークアップで、絶対に正しい答えはないと思うので、
自分で正しいと思える理由があるなら、それでも全く問題はないと思います。

dl要素をこだわっているようなので、ひょっとしたら新着情報を論理要素として定義リストと
捉えているのではないかと勝手に推測して、勝手にこんなコメントをつけましたが、
外していたらごめんなさい。

この回答への補足

すみません、私の説明不足で申し訳ないです。
<dt>の中に入るimgは新着内容の詳細ページで表示される
画像のサムネールを入れるつもりです。
<dl>の内容自体が新着情報なので、NEWなど更新のマークは
表示する必要ないだろう…と判断しました。

サムネールの画像が<dt>定義で、画像の説明<dd>が新着内容
…というつもりです。

言葉が足らずすみません。他に読んだ方で＃3さんと同じ
解釈をされた方がいるかもしれませんので、
私の説明不足に補足できて良かったです。
ありがとうございます。

補足日時：2009/02/12 19:05

No.4 ベストアンサー 回答者： abril 回答日時： 2009/02/12 18:22

興味あるお題なのでちょっとトライしてみました。

ただし、以下はdtの子要素のimgが常にW50px×H50pxの固定サイズである…と仮定した場合に限ります。

----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>サンプル</title>
<link href="./css/sample.css" type="text/css" rel="stylesheet" media="all" />
</head>

<body>

<div id="index">

<dl class="news">
<dt><img src="img/photo.jpg" alt="画像の説明" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。ここは短いテキストです。</a></dd>
<dt><img src="img/photo.jpg" alt="画像の説明" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
<a href="#">新着情報のテキストが入ります。ここは長いテキストです。ここは長いテキストです。ここは長いテキストです。</a></dd>
<dt><img src="img/photo.jpg" alt="画像の説明" width="50" height="50" /></dt>
<dd><span>2009.01.01</span><br />
新着情報のテキストが入ります。ここは短いテキストです。</dd>
</dl>

</div>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
#index {
width: 300px;←現状の指定がわからないのでとりあえず適当な幅を設定してみました。
}

#index dl.news {
zoom: 100%;←これを指定しておかないと、IE6でdlのボーダーがdtとddの1セット毎に引かれてしまう様なので…
margin: 0;
padding: 8px 15px;
border: #999 1px solid;
}
#index dl.news dt {
width: 50px;
height: 50px;
margin: 0;
}
#index dl.news dt img {
vertical-align: bottom;
}
#index dl.news dd {
min-height: 50px;
_height: 58px;
margin: -50px 0 6px 0;
padding: 0 0 8px 57px;
background: url(../img/linet.gif) repeat-x bottom;
line-height: 125%;
}
----------------------------------------------------------------------
質問者様は既に色々おわかりになってらっしゃる方だと思いますので、ポイントだけ。
・ddは必ずdt以上の高さを確保できる様に、min-heightで50pxを指定。IE6ではこのプロパティが未実装の為、アンダースコア・ハックでheightプロパティで代用。ここの高さが58pxとなっているのはIE6ではこのサンプル文書（XML宣言付のXHTML1.1）の後方互換モードでは、上下paddingがheightの値の中に含まれしまう為、その分を足している為です。
・ddのレンダリング開始位置の上の基点をマイナス・マージンでdtと同じ位置に引き戻しました。

ちょっと簡単過ぎる方法なんですが、一応これでIE6/7、Firefox2/3、Safari3、Opera9.25、で確認した限りでは特に問題はない様です。
最初にお断りした通り、dtの高さと幅が一律ではない場合には使えませんので、その場合は忘れて下さい。

※マークアップ云々の問題については、ANo.3様の「photo.jpgは「NEW!」とかの類の画像」という推測通りであるならば、やはり「更新履歴をdl要素、日付をdt、更新内容をddでマークアップしdt要素の背景画像としてCSSで「NEW!」の画像を設定」というご指摘の方法が適切だと思います。その様な構成の更新情報であるなら、私もそうしています。

この回答へのお礼

懇切丁寧なご説明ありがとうございます。

レイアウト調整が複雑になる…という理由からXML宣言なしの
XHTML1.0標準モードなのですが、きれいに表示されました。
<dt>の中のimgはW50px×H50pxで固定なので、このまま使わせて
頂こうと思います。

色々検索した中で、他にもマイナスマージンを使う方法がありましたが、
私ではうまく行きませんでした。。
min-heightとzoom:100%がポイントなんですね。
キレイに表示され、とてもスッキリしました！
これから何度となく、この方法を使うことがあると思います。
本当にありがとうございます！

お礼日時：2009/02/12 19:58