ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.4020733 CSSでの横位置指定：IE6の表示について
質問者：h-0115 初心者です。宜しくお願い致します。
テーブルを使わず、画像の下にテキストが入った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のみずれてしまいます。

長くなり申し訳ありません。宜しくお願い申し上げます。
困り度：
  • すぐに回答を！
質問投稿日時：
08/05/14 01:44
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

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

IE6はブロック要素にfloatすると横のmarginが２倍になる有名なバグがあります。
​http://cssbug.at.infoseek.co.jp/detail/winie/b107.html​
回答者：tenderfeel
種類：回答
どんな人：経験者
自信：自信あり
回答日時：
08/05/14 10:49
この回答へのお礼ご回答、ありがとうございました！
一つ目の方法で、解決しました！！
昨日のお昼からずっと頭を悩ませていたので、ものすごく助かりました。
有名なバグだったのですね・・・。知りませんでした。勉強します・・・。
本当に本当にありがとうございました！！！（；；）

回答良回答10pt
ANo.1 とりあえず、divとa要素の数が合いません。
修正したhtmlを教えてください。
回答者：metametamu
種類：補足要求
どんな人：一般人
自信：参考意見
回答日時：
08/05/14 08:34
この回答への補足返信ありがとうございます。
間違っており、すみませんでした。
<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>
間違っていると思われた部分を修正しました。
この回答へのお礼解決しました！
HTML部分のミスには気づきませんでした・・・。
ご返信いただいてありがとうございました。
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ