HTML css で構築したサイトがIE6でバグが発生します。

質問

はじめまして。
まずは、こちらのサイトをご覧頂けたら幸いです。
http://pandeiro.jp/suda/index.html

IE7やfirefoxではきちんと見ることができるのですが、
IE6だと、右側にすきまができてしまいます・・・
どのようにして解決して良いかまったくわからず、壁にあたっております。

どなたかご教授いただけないでしょうか。

回答No.3

parumon · ベストアンサー

靴の画像の横並びですが、例として以下の方法でどうでしょう？

HTMLファイル（<div id="shoes">内の<br>と&nbsp;を削除）

<div id="shoes">
<img src="images/imaihiroki-shoes/s1.jpg" width="195" height="195">
<img src="images/imaihiroki-shoes/s2.jpg" width="195" height="195">
<img src="images/imaihiroki-shoes/s3.jpg" width="195" height="195">
（省略）
</div>

CSSファイル（#shoesにpadding-bottom: 15px;を追加。新たに#shoes imgを設定）

#shoes {
width: 626px;
height: auto;
margin-left: 10px;
background-color: #1F1918;
display: inline;
float: right;
margin-right: 12px;
margin-bottom: 13px;
margin-top: 0px;
padding-bottom: 15px;
}

#shoes img {
width :195px;
margin: 20px 4px 0px 8px;
float: left;
}

これでいかがでしょうか？

お礼

参考にさせていただきました。
本当にありがとうございます。

回答No.2

parumon

IE6ではfloatしたものにmarginを設定すると値が2倍になるようです。
#waku2、#waku3、#shoesのfloat指定の直前にdisplay:inline;と書いておくと良いみたいです。

また、質問内容とは関係ないですが、HTMLファイルの
<div id="shoes">&nbsp;&nbsp;
<br>
&nbsp;&nbsp; <img src="
とある箇所は、
#shoes img{
margin:○px ○px ○px ○px;
}
と画像にマージン指定の方がすっきりしてよいかと思います。
&nbsp;を利用すると、フォントサイズを変更した場合、レイアウトが崩れてしまいます。

参考URL：

http://www.trapon.com/log/200611/ie6floatmargin2.html

お礼

parumonさん

お教えいただい誠にありがとうございました。
無事、直りました。

靴の画像ですが、cssで整列をさそうと思ったのですが、
すべて縦に並んでしまったので、どうすれば今のように表示させるかがわからなくて、あきらめてしました。

■
■
■
■
■

↑こんな感じになってしまいます・・・

cssで

■■■
■■■
■■■

↑こうさせる方法がわからない状況です・・

もしお時間があれば、お教えいただければ幸いです。

回答No.1

noname#172317

サイト見てみました。

原因になっているのが『<div id='waku3'>』です。
margin指定で、右側 12px指定していますが、
これにより、右に隙間が出来ます。
（ローカルにて、右側 0pxで実験した所、隙間は回避）

それから、</div>が１つ多いです。ソース再チェックすることをオススメします。