IE7だけに出る謎の空白（CSS）の解決方法

質問

以前も似たような症状が出たのですが・・・
IE７でだけ、謎の空白が約3px程度出てしまいます。場所は<dl></dl>と<img>の間です。
イメージとしては上から3段をくっつけて中身（<dl></dl>）だけ高さを可変にしてひとつの枠のように見せたいと考えています。

ですがIE７でだけ空白ができてしまうのです。
原因と解決方法を教えていただけないでしょうか？

<div id="right">
<img class="top" src="img/bg-rtop.gif" />
<dl>
<dt><img src="img/right-tit1.gif" /></dt>
<dd>ああああああああああああああああああああああああああああああ</dd>
<dt><img src="img/right-tit2.gif" width="200" height="20" /></dt>
<dd>ああああああああああああああああああああああああ</dd>
<dt><img src="img/right-tit3.gif" width="200" height="20" /></dt>
<dd>ああああああああああああああああああああああああああああああああ</dd>
<dt><img src="img/right-tit4.gif" width="200" height="20" /></dt>
<dd>あああああああああああああああああああああああああ</dd>
</dl>
<!-- ここで空白ができてしまう・・・-->
<img class="under" src="img/bg-runder.gif" />
</div>

■CSS
@charset "shift_jis";
body {
text-align: center;
margin: 0px;
background-image: url(img/bg.gif);
vertical-align: bottom;
line-height: 165%;
letter-spacing: 1px;
font-size: 12px;
}
/* 右側の設定*/
#right{
width:200px;
float:right;
}
#right .top {
margin: 20px 0 0 0;
}
#right dl {
background-image: url(img/bg-rmiddle.gif);
margin: 0px;
padding: 0 0 20px 0;
}
#right dt {
padding: 10px 0 0 0;
}

#right dd {
margin: 10px 0 0 12px;
padding: 0 0 0 0;
}
#right .under {
margin: 0px;
}
一部省略してます・・・

どうかよろしくお願いいたします。

回答No.1

kuzumiHK · ベストアンサー

インライン要素のimgとブロック要素のdlが、
div内で混在しているからかもしれません。
pタグなどで囲って余白を固めてみてはいかがでしょう。

<div id="right">
<p><img class="top" src="yellow.gif" /></p>
<dl>
～
</dl>
<!-- ここで空白ができてしまう・・・-->
<p><img class="under" src="green.gif" /></p>
</div>