CSSの他ブラウザでの崩れの対処方法を教えてください！

当方ネット初心者が集まり、右往左往しながらネットショップを運営しております。

今回新しいトップページを全部CSSで作成し、
先日リニューアルオープンしたのですが問題が発生しとても困っていますのでぜひお助け願いたいと思い書き込ませていただきたいと思います。

現在、検証の結果ウインドウズのIE6.0とIE7.0では正常に表示されるのですが、MacのFire Foxとsafariではレイアウトがグチャグチャになってしまいます。

また、重た過ぎるのか時々正常にブラウザに映し出されない事があります。写真の画質を落とせばいいのですが、ネットショップの性質上落としたくありません。。。

ざっと素人が説明させていただきましたが、
当方のHPのURL載せておきますので、至急アドバイスをいただけましたら幸いです。

宜しくお願い致します。

Mari Pulang
http://www.rakuten.ne.jp/gold/luckygo/

No.1 ベストアンサー 回答者： grumpy_the_dwarf 回答日時： 2008/06/26 12:26

> ウインドウズのIE6.0とIE7.0では正常に表示されるのですが、

> MacのFire Foxとsafariではレイアウトがグチャグチャ

まず、div#indexの高さが100%ですね。CSSでブロックの高さや幅の
パーセント表記は、親のサイズを基準に考えます。div#indexの親は
bodyで、速い話がブラウザの高さになっちゃいます。その100%だか
ら、せいぜい700～1000pxくらい。div#copyはその直後にありますか
ら、ページトップからちょっとスクロールしたら見えちゃいます。

IEには「中身がはみ出したらボックスを勝手に広げる」バグがある
ので、このミスは表面化しません。

似たようなことが他のあっちこっちのボックスの高さ指定でも起き
ています。中身より小さな高さしか指定していなくて、次のボック
スを正しく配置するとエラいことになっちゃうパターン。一番ひど
いのはdiv.main02aかな。250pxしかない。div#fooderもそう。

そこらへんの高さの指定を削除して成り行きで配置させれば、め
ちゃくちゃな崩れはなくなります。

この回答へのお礼

どうもありがとうございます！すごい助かりました！

お礼日時：2008/06/26 12:42

No.3 回答者： noname#100277 回答日時： 2008/06/27 01:35

IEを基準にサイト構築はしないで下さい。

基礎は全て「Firefox」等のW3Cに準じてるブラウザで実行。
IEは飽く迄「拡張」程度に留めるべき。
（アニメーション・カーソルやスクロール・バー等）

No.2 回答者： tenderfeel 回答日時： 2008/06/26 15:15

色々アレなのでポイントだけ・・・

１．CSSを書く前にHTMLだけで書く
＞レイアウト崩壊の原因がHTMLの書き方にある場合も。
　最初にHTMLだけ書いていくと、コンテンツの並び順が分かりやすいです

２．CSSのレイアウト優先でソースを書かない
＞DIVタグやID、classまみれになりがち。TPOにあわせてタグを使い分ける
http://www.kanzaki.com/docs/html/htminfo11.html

３．製作時にIEでプレビューしない
＞散々言われてますがCSS書くときIEで確認するのは愚の骨頂です
　Firefoxかsafariで確認してIEでおかしいところだけ直すこと

４．floatやpositionプロパティはIEでバグがあるので気をつけること


どうしても同じ表示にならないのであれば、巷で配布されてるレイアウトテンプレートを使うのが楽だと思います。

参考URL：http://www.kanzaki.com/docs/htminfo.html

この回答へのお礼

迅速なお返事ありがとうございます。
基礎から勉強しなおします。。

お礼日時：2008/06/26 15:54