• ベストアンサー

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

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

えーと、他の回答でも散々書かれてるんですが・・・ ＣＳＳ使うなら先にFirefoxで確認してください。 ＩＥのレンダリングは凶悪なので信用してはだめです。 （実際今崩れてるくらいＣＳＳの解釈に差があるってことです） 崩れる原因ですが、 ・footerにclearプロパティ入れる ・IEとFirefoxではボックスの計算方式が違う ・IEはfloatした要素の横方向marginを約2倍に広げるバグがある 以上気をつければ修正できると思います あとhasLayoutっていうのを把握しておくとＩＥ対策しやすいと思います http://coliss.com/articles/build-websites/operation/css/143.html

smile0915
質問者

お礼

お礼が遅くなってしまってすみません。 細かく教えて頂きましてありがとうございました。

その他の回答 (1)

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

floatを理解されていないことが原因ですね。 答えだけ言うと、 leftボックスとフッターのｃｓｓに clear:both; を入れてみてはいかが？

smile0915
質問者

お礼

お礼が遅くなってしまい、すみません。 上記タグで修正ができました。 ありがとうございます。 まだ少しレイアウトが崩れている所があるので、自分なりに修正してみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. その他（プログラミング・開発）

関連するQ&A

  • CSSレイアウトについて

    XHTML+CSSでレイアウトし、IE6、FireFoxで確認すると、横のずれはないのですが、縦の崩れができてしまします。 具体的にはIEでは正しく表示されているが、FireFoxで見ると、縦方向に余分なスペースができるといった具合です。 　きちんとCSSで高さを指定していないことが理由でしょうか？

    • 締切済み
    • CSS
  • ＣＳＳレイアウト＝firefox3.0とfirefox3.5のブラウザ

    ＣＳＳレイアウト＝firefox3.0とfirefox3.5のブラウザ表現の違いについて教えてください。 firefox（以下。ＦＦ）3.0と、3.5ブラウザの見え方の違いが発生してしまいました。 ＦＦ3.5基準だと、ＩＥ（6.0。7.0。8.0）でも問題なくみえますが、 なぜかＦＦ3.0だけ　ＣＳＳレイアウトが　崩れています。 基本　ＦＦは準拠しているものとして　3.5基準で作っていましたが、 仇となってしまいました。（私の勉強不足ってのもありましたが） これは　ハック等で問題は解決できるのでしょうか？ それとも、margin等の規格がＩＥバグのように　違うものになっているのでしょうか？ ご回答よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • IEとファイヤーフォックスでのレイアウト違い

    外部CSSにてレイアウト組んだのですがIE７とファイヤーフォックスで微妙に違うレイアウトになってしまいます。。 IEですとメインフラッシュの横に１ｐｘ程度の白い空白ができてしまいます。 正しくはファイヤーフォックスのように空白がない　というようにIEでも表示させたいのですが・・・・。 どなたかお力添えいただけると幸です。。 http://studio-evah.com/test/ cssは http://studio-evah.com/test/css/css.css　です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • ieやfirefoxで。cssレイアウトが印刷時崩れる。

    cssでレイアウトしてます。 ieやfirefoxでの　ブラウザ上（画面）表示ができるのですが、 いざ、印刷プレビューや印刷になると　レイアウトが 崩れてしまいます...どのような　解決策。問題点があるのでしょうか？ 印刷ページが中途半端にページをまたいでしまうから？ marginとpaddingがゴチャついて　ダメ。 いろいろ考えられますが。。。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • ie7の印刷レイアウトがくずれます。css対策　

    質問です。 印刷についてのIE7対策をうかがいたいです。 画面上はまったく問題ないのですが、 いざ、印刷となると崩れてしまいます。 フッターがメインメニューの半ばまで　せりあがって （崩れた形）で印刷されてしまいます。 たぶん3のメニューが短いからか... (今後　a-2　が更新する可能性があるためにheightはautoに してありますが。。) 対策としてはどうしたらよいでしょうか？ よろしくお願いします。 ※print用のcss　はすでに作成しています。 IE8,ＦＩＲＥＦＯＸについてはフッターを css改行コードに強制改ページさせることにより 修正は成功しています。 メイン部分のレイアウトとしてはこういった感じです。 ​http://css.uka-p.com/3column/image.html​ レイアウトの順番としては。 0コンテナでつつんでます。 1ヘッダー height=auto 2メイン height=auto float: right; 　（内部）a-1　右エリア height=auto float: right; 　　（内部）a-2　メインの部分 height=auto float: none; 3左メニュー height=auto float: left; 4フッター　　height=auto clear:both; ちなみに画面上では　ie6,ie7.firefoxはまったく問題が ありません.... よろしくお願いします。

    • ベストアンサー
    • CSS
  • ＣＳＳでレイアウトしたときにＩＥ6とＦＦ2でサイドナビの表示が異なります。

    ＣＳＳでレイアウトしたのですが、サイドナビのショップ名一覧が ファイヤーフォックス２で見たときは、異常はないのですが、 ＩＥ６・ＩＥ７で見ると右ヅレしてしまいます。 CSSの設定方法が悪いのでしょうか？ 何故か分かりません。 すいませんが教えて下さい。 http://pairing.dayuh.net/index2.html

    • 締切済み
    • CSS
  • スタイルシート（ＣＳＳ）がＳａｆａｒｉのみレイアウトが崩れるときの対処法

    趣味でＣＳＳレイアウトを用いて、サイトを作成しています。 ＣＳＳでつくったコンテンツ部分の枠の中に、ＣＳＳで３つのわくを横並びにつくっていたのですが、IEで表示がくずれたので、仕方なくテーブルで作成したところ、正しく表示されるようになりました。 しかしＳａｆａｒｉのみその３つのわくが横に飛び出してしまいます。 他にＦｉｒｅｆｏｘ、ＩＥ７、Ｓｌｅｉｐｎｉｒでは正常に表示されます。 こういうときＷｅＢデザイナーの方はどうされているのでしょうか？

    • ベストアンサー
    • HTML
  • どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。

    ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • IE8でのレイアウト崩れ

    FireFoxでCSSを確認してレイアウトが問題なかったのですが、IE８で表示すると、とんでもない崩れが生じてしまいます。 CSSの解釈が違うのでしょうか？ いろいろ調べましたが訳が分かりません。 教えてください。

    • ベストアンサー
    • HTML
  • CSSでのレイアウト（Firefox向け）

    下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） 　　　┌──────────────┐ 　　　｜┌─────┐┌─────┐│ 　　　｜｜TEXT　　　　｜｜TEXT　　　　｜｜ 　　　｜｜　　　　　　　　｜｜　　　　　　　｜｜ 　　　｜└─────┘└─────┘│ 　　　└──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する