みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

FirefoxだとCSSで作ったフッターが崩れてしまいます

お世話になります。現在、CSSにて2段組にて
ヘッダー・メニュー・コンテンツ・フッター部分にレイアウトを
切り分けてサイトを作っておりますが

IEだと私が意図した通りに表示されるのですが、FireFoxだと
フッター部分のレイアウトが、コンテンツ部分にかぶってしまい
レイアウトがぐちゃぐちゃになってしまいます。

#cover { width: 700px; height: 100% }
#menu { width: 150px; height: 100%; float: left }
#main { width: 550px; height: 100%; float: right }
#footer { width: 700px; clear: both }

こちらが、htmlです。
<div id="cover">
<div id="main">コンテンツ</div>
<div id="menu">メニュー</div>
<csobj csref="a.html" h="259" occur="27" t="Component" w="700">
<div id="footer">フッター</csobj></div>
</div>
※このcsobjは、Goliveのコンポーネント機能を使って
1つの外部ファイルからリンクさせることによって、
ヘッダー部分に変更が生じたら、全ページを一括で更新できる
機能を使っています。SSI(サーバーサイドインクルード)みたい
なやつでしょうか。
とても困っていますので、詳しい方ぜひご教授ください。
よろしくお願いいたします。

投稿日時 - 2008-03-13 11:22:59

QNo.3858661

すぐに回答ほしいです

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

自分のFirefoxで確認したところ、かぶる現象はおきてませんでした。

一応推測される解決方法書いておきます。

1、css記述部分の末尾の「;」が抜けているので、記述する

2、cssの記述を
#cover { width: 700px; height: 100%;
/*for mac-ie5.x*/
/*\*//*/
overflow: hidden;
/**/
}
#cover:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
#menu { width: 150px; height: 100%; float: left; }
#main { width: 550px; height: 100%; float: right; }
#footer { width: 700px; clear: both; }
こんな感じでclearfixを入れてみる

3、</csobj></div>の記述を</div></csobj>にしてみる

私はGolive使った事ないのでわかりませんが、基本的にはコンボーネント機能のタグを追加する前に、まずは純粋にhtmlとcssのみできちんとレイアウトできているか確認した方がいいと思います。
その上で<csobj>などを追加してみて崩れたらおそらくタグの配置がおかしいので、そこは微調整していけばいいかと思います。

明確な答えが出せなくてすいません。
参考になれば幸いです。

投稿日時 - 2008-03-13 15:42:42

お礼

tunedriver様
こんなに丁寧なご回答をいただきまして本当にありがとうございます。
clearfixも試してみましたがダメでした。
知人からCSSを段組で作ってくれと頼まれたサイトだったので、
もう少しあれこれ、試行錯誤したい思います。
また、機会がありましたら、よろしくお願いいたします。

おそらく、私と同じような問題に直面した方には、tunedriver様の
解決方法で大丈夫だと思いますので、この質問を締め切りたいと
思います。

投稿日時 - 2008-03-14 09:05:32

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

htmlの、メニューとコンテンツの順番を逆にして、#mainのfloatをleftにすると、どうなりますか?

投稿日時 - 2008-03-13 14:48:29

お礼

早速のご回答ありがとうございます。
逆にすることは、SEO対策上どうしてもできないのですが、
試しにやってみてもダメでした。
理由がよくわからないので、いろいろチャレンジ
したいと思います。ありがとうございました。

投稿日時 - 2008-03-14 09:00:35

あなたにオススメの質問