ul、dlタグでリストを作成すると行間に余白が

とても基本的な質問なのですが、どなたか教えて頂けると助かります。

ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。
この余白を消したいのですが、どうすれば宜しいでしょうか？

■htmlの記述
<ul>
<li>画像１</li>
<li>画像２</li>
<li>画像３</li>
</ul>

<dl>
<dt>画像1-1</dt>
<dd>画像1-2</dd>
<dt>画像2-1</dt>
<dd>画像2-2</dd>
<dt>画像3-1</dt>
<dd>画像3-2</dd>
</dl>

■CSSの記述
#ul{
margin:0;
padding:0;
line-height:0;
list-style:none;
}

#ul li{
margin:0;
padding:0;
line-height:0;
}

#dl{
margin:0;
padding:0;
line-height:0;
list-style:none;
}

アドバイスをどうぞ宜しくお願いします。

No.5 回答者： harawo 回答日時： 2008/06/11 17:22

解決策はすでに出ているようですから、よりよい対応として……という話をします。

UL、DL要素（タグ）は、箇条書きという、かなり限定的に使用されるもので、写真を並べて表示する用途とは関係ありませんし、ウェブブラウザによって、属性のばらつきが出てしまいやすいものでもあります。
こういうケースでは、ブロック要素であるという属性以外、なにも属性が定義されていないDIV要素（タグ）を使うのが、オーソドックスな手法といえます。

#indent {margin-left: 120px;}
このように、左側に余白を作るスタイルシートを作り、
<div id="indent"><img src="picture.jpg"></div>
として、DIV要素にスタイルシートを適用します。

No.4 回答者： higekuman 回答日時： 2008/06/11 10:46

IEがどうのこうの以前に、

#ul{

この記述、間違っていますよ。

これは、htmlで、<xxx id="ul"> と書いたときに有効な記述です。

正しくは、

ul{

です。

それを直した上で、改めて確かめてください。

この回答へのお礼

ありがとうございます。
本当は「#ul01」というようにidの名称をつけていたのですが、ご質問する上で簡単に書こうと思い、省いてしまいました。

お礼日時：2008/06/11 14:27

No.3 回答者： nori_007 回答日時： 2008/06/11 10:11

以下の方法で対策が取れると思います。

http://cssbug.at.infoseek.co.jp/detail/winie/b07 …

ご確認ください。

この回答へのお礼

とても参考になる資料を教えていただき、ありがとうございました。
詳しく読んで、勉強したいと思います。

お礼日時：2008/06/11 14:31

No.2 回答者： readordie 回答日時： 2008/06/11 09:58

ul li img{

vertical-alugn:bottom;
}

でどうでしょうか

この回答へのお礼

教えて頂いた通りに書き加えたらバッチリでした！
ありがとうございました！！

お礼日時：2008/06/11 14:28

No.1 回答者： ger 回答日時： 2008/06/11 08:29

ブラウザの歴史を観れば一目瞭然、IE など、マイクロソフトお得意の亜流、我流ブラウザですから、表示できませんの注意書きをどこかに載せるべきです。