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

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

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

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

No.3 ベストアンサー 回答者： parumon 回答日時： 2008/09/04 16:34

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

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

<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;
}


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

この回答へのお礼

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

お礼日時：2008/10/09 13:36

No.2 回答者： parumon 回答日時： 2008/09/04 14:31

IE6ではfloatしたものにmarginを設定すると値が2倍になるようです。

#waku2、#waku3、#shoesのfloat指定の直前にdisplay:inline;と書いておくと良いみたいです。


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

参考URL：http://www.trapon.com/log/200611/ie6floatmargin2 …

この回答へのお礼

parumonさん

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

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

■
■
■
■
■

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

cssで

■■■
■■■
■■■

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

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

お礼日時：2008/09/04 15:02

No.1 回答者： noname#172317 回答日時： 2008/09/04 10:37

サイト見てみました。

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

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