CSSでの横位置指定：IE6の表示について

質問

初心者です。宜しくお願い致します。
テーブルを使わず、画像の下にテキストが入った2つのboxを、中央に表示させたいのですが、IE6だけうまくいきません。
ソースは以下です。

■HTML
----------------------------------
<div id="list">
<div class="list_top">
<div class="list_title">タイトル</div>
</div>
<div class="list_cont">
<div class="list_photo">
<img src="g"width="130" height="150" border="0" /></a>
<a href="">ＡＡＡＡＡＡＡＡ</a>
</div>
<div class="list_photo">
<img src="g"width="130" height="150" border="0" /></a>
<a href="">ＡＡＡＡＡＡＡＡ</a>
</div>
</div>
</div>

■CSS
----------------------------------
#list {
FLOAT: right;
MARGIN: 5px 4px 5px 6px;
WIDTH: 315px;
HEIGHT: 300px;
BORDER: #000000 1px solid;
}
.list_top {
PADDING-RIGHT: 0px;
PADDING-LEFT: 5px;
BACKGROUND: url() left top;
PADDING-BOTTOM: 0px;
PADDING-TOP: 9px;
HEIGHT: 24px;
}
.list_cont {
padding:0px 0px 0px 25px;
BACKGROUND: url() left top;
}
.list_photo {
FLOAT: left;
MARGIN: 7px;
WIDTH: 130px;
}

以上です。
CSS側の
【.list_cont {
padding:0px 0px 0px 25px;】
上記の指定で、Firefoxと、IE7では中央に表示できるのですが、
IE6のみずれてしまいます。

長くなり申し訳ありません。宜しくお願い申し上げます。

回答No.2

tenderfeel · ベストアンサー

.list_photoのmarginをpaddingに変更
または
* html .list_photo {margin:3px;}を下に追加する
で如何でしょうか。

IE6はブロック要素にfloatすると横のmarginが２倍になる有名なバグがあります。
http://cssbug.at.infoseek.co.jp/detail/winie/b107.html

お礼

ご回答、ありがとうございました！
一つ目の方法で、解決しました！！
昨日のお昼からずっと頭を悩ませていたので、ものすごく助かりました。
有名なバグだったのですね・・・。知りませんでした。勉強します・・・。
本当に本当にありがとうございました！！！（；；）

回答No.1

noname#66720

とりあえず、divとa要素の数が合いません。
修正したhtmlを教えてください。

お礼

解決しました！
HTML部分のミスには気づきませんでした・・・。
ご返信いただいてありがとうございました。

補足

返信ありがとうございます。
間違っており、すみませんでした。
<div id="list">
<div class="list_top">
<div class="list_title">タイトル</div>
</div>
<div class="list_cont">
<div class="list_photo">
<img src="g"width="130" height="150" border="0" />
<a href="">ＡＡＡＡＡＡＡＡ</a>
</div>
<div class="list_photo">
<img src="g"width="130" height="150" border="0" />
<a href="">ＡＡＡＡＡＡＡＡ</a>
</div>
</div>
</div>
間違っていると思われた部分を修正しました。