解決済み

CSSのレイアウトがFirefoxで崩れてしまう

  • すぐに回答を!
  • 質問No.4174879
  • 閲覧数1525
  • ありがとう数10
  • 気になる数1
  • 回答数2
  • コメント数0

お礼率 62% (22/35)

CSS初心者ですが教え下さい m(_"_)m

全体をCSSでレイアウトしているサイトを作成中です。
Blogのような3カラムで作成しております。

IEで表示すれば3カラムでレイアウトは崩れませんが・・・
Firefoxで表示するろ思いっきり崩れてしまいます (T_T)
1番右のボックスが右に表示さえれなく下に表示されてしまい、
フッダーが下ではなく、上にあがってきてしまいます。

サンプルページをアップしたので、IEとFirefoxを見比べて頂けると一目瞭然かと思います。
http://www.web.grrr.jp/bank/san/

CSSは3つで指定しています(テキストファイルでアップしてあります)
http://www.web.grrr.jp/bank/san/styles-color.txt
http://www.web.grrr.jp/bank/san/styles-site.txt
http://www.web.grrr.jp/bank/san/styles-width.txt

CSSハックは、あまり使いたくないので、CSSのタグを何とか修正して、
Firefoxでも綺麗に表示させたいのですが・・・
修正箇所等がわかる方がいらっしゃいましたら、教えて頂ければ幸いです。
どうぞ宜しくお願いします m(_"_)m

質問者が選んだベストアンサー

  • 回答No.1

ベストアンサー率 56% (215/379)

えーと、他の回答でも散々書かれてるんですが・・・
CSS使うなら先にFirefoxで確認してください。
IEのレンダリングは凶悪なので信用してはだめです。
(実際今崩れてるくらいCSSの解釈に差があるってことです)

崩れる原因ですが、
・footerにclearプロパティ入れる
・IEとFirefoxではボックスの計算方式が違う
・IEはfloatした要素の横方向marginを約2倍に広げるバグがある
以上気をつければ修正できると思います

あとhasLayoutっていうのを把握しておくとIE対策しやすいと思います
http://coliss.com/articles/build-websites/operation/css/143.html
お礼コメント
smile0915

お礼率 62% (22/35)

お礼が遅くなってしまってすみません。
細かく教えて頂きましてありがとうございました。
投稿日時 - 2008-07-19 18:26:20
Be MORE 7・12 OK-チップでイイコトはじまる

その他の回答 (全1件)

  • 回答No.2

ベストアンサー率 55% (305/551)

floatを理解されていないことが原因ですね。

答えだけ言うと、
leftボックスとフッターのcssに
clear:both;
を入れてみてはいかが?
お礼コメント
smile0915

お礼率 62% (22/35)

お礼が遅くなってしまい、すみません。
上記タグで修正ができました。
ありがとうございます。
まだ少しレイアウトが崩れている所があるので、自分なりに修正してみます。
投稿日時 - 2008-07-19 18:27:53
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ