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

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

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

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

回答No.4

higekuman

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

#ul{

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

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

正しくは、

ul{

です。

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

お礼

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

回答No.3

nori_007

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

http://cssbug.at.infoseek.co.jp/detail/winie/b071.html

ご確認ください。

お礼

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

回答No.2

readordie

ul li img{
vertical-alugn:bottom;
}

でどうでしょうか

お礼

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

回答No.1

ger

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