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のコンポーネント機能を使って
１つの外部ファイルからリンクさせることによって、
ヘッダー部分に変更が生じたら、全ページを一括で更新できる
機能を使っています。SSI(サーバーサイドインクルード)みたい
なやつでしょうか。
とても困っていますので、詳しい方ぜひご教授ください。
よろしくお願いいたします。

回答No.2

tunedriver · ベストアンサー

自分の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>などを追加してみて崩れたらおそらくタグの配置がおかしいので、そこは微調整していけばいいかと思います。

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

お礼

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

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

回答No.1

higekuman

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

お礼

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