IE6 でHPが正しく表示されない部分があります

質問

ドリームウィーバーでサイトを作っております。

下記アドレスで、ブラウザ表示チェックをした際、
http://ipinfo.info/netrenderer/index.php

IE6でサイトを表示すると、mainコンテンツ部分が表示されていない
ようなのです。当HPはhttp://chloe.gozaru.jp/です

IE7では問題なく表示出来ています。
なぜIE6ではエラーが出るのでしょうか。教えてください。

回答No.1

pika_kichi · ベストアンサー

IE7やFire Foxでは多少のレイアウトの誤差は大丈夫ですが、IE6は結構シビアです。

よってスタイルシートを使用してレイアウトを行う場合、スタイルシートの知識などが結構必要になってきますので、無料配布などのテンプレートを改造したりして使おうとすると幅が合わずに下に落ちるなどの現象は良く起きる事です。

質問者さんのサイトを見た場合、大雑把に言うと
wrapperというIDで設定された枠の中にleft_menuとmainのIDで設定された枠をfloat:leftというタグを使って横並びにさせています。

ですので、簡単な図式にすると
wrapperの幅≧left_menu＋main
でなければレイアウトが崩れます。

見た感じ
wrapperのwidth860px＝left_menuのwidth680px＋mainのwidth180px
でよさそうですが、良く見るとwrapperの両サイドにborder-rightとleftで1pxずつの線が入っています。

ですのでwrapperの幅は
width860px - border-right1px - border-left1px＝858px
となってしまい、2px分大きくなってしまっていますので、横に並びきれずにメイン枠が下に落ちてしまっています。
ですので、wrapperのwidthを862pxにするか、left_menuかmainのwidthを2px分小さくして調整すればIE6でも大丈夫だと思います。

お試しを。

お礼

画面上からmain部分が消えてしまっているのだとばかり
思っていました。幅があっていなかったとは、目からウロコです。

pika_kichi様のおっしゃる通りに、さっそく幅を変更してみたところ
下に落ちていたメイン枠が元の位置に戻り、正常に表示されました。

有難うございます、本当に助かりました。