背景色を設定しているのにFirefox,Opera等で背景出ない。overflow:hiddenではコンテンツ下部が途中で切れてしまう

質問

CSSでサイトを制作中ですが、背景が出ないことで困っております。

わかりやすくするためレイアウト画像を添付しましたのでレイアウトをご確認ください。

端的に書くと、コンテンツの白色の背景を記述しているのに、なぜか色がでず、両脇の背景色が表示されてしまっています。

このようになってしまうブラウザは、Firefox3,Opera8.5、NS7等です。IEは6なのですが、これだけ大丈夫でした。

でもIE6だけOKではダメなので、調べると、overflow:hiddenで直るような記載を見つけたのでやってみました。

すると、今度は
■IE6でコンテンツが終わっていないのに、途中で切れてフッターが出現してまう

■ミドルコンテンツであるdiv id="mdl"の中の左サイドバーと右コンテンツが両端に離れてしまい、間が開きすぎてしまう。

というようになってきました。どうやって回避すればよいでしょうか？

以下ソースです。
●CSS
------------------------------------------------------------
div#hdr-wrap {
background:url(../img/cmn/hdr_bg.gif) repeat-x;
top:0px;
width:100%;
height:120px;
text-align:center;
}

div#hdr {
width:900px;
_width: 902px;/*IE対策*/
height:120px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#gbnavi-wrap {
background:url(../img/cmn/gbnv_bg.gif) repeat-x;
top: 120px;
width:100%;
height: 51px;
text-align:center;
}

div#gbnavi {
width: 900px;
_width: 902px;/*IE対策*/
top: 120px;
height: 51px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#main-wrap {
top:171px;
width:100%;
height:100%;
background: url(../img/cmn/bg.gif) repeat;
text-align:center;
}

div#main {
overflow: hidden;/*BGcolor表示対策(Firefox,Opera,NS)*/
width: 920px;
_width: 922px;/*IE対策*/
height:100%;
background: #fff;
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#ftr-wrap {
clear: both;
width: 920px;
_width: 922px;/*IE対策*/
height:151px;
background: url(../img/cmn/ftr_bg.gif) repeat-x;
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
margin-left: auto;
margin-right: auto;
text-align: center;
}

div#footer{
clear: both;
color: #415880;
width: 900px;
_width: 902px;/*IE対策*/
height:151px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
------------------------------------------------------------

●HTMLソースは、単にくくっているだけです。
<div id="hdr-wrap">
<div id="hdr">
</div>
</div>
<div id="gbnavi-wrap">
<div id="gbnavi">
</div>
</div>
<div id="mdl-wrap">
<div id="mdl">
</div>
</div>
<div id="ftr-wrap">
<div id="ftr">
</div>
</div>
------------------------------------------------------------

回答No.4

abril

提供されたHTMLとCSSを見る限りだと、floatを使用しているわけでもないのに、なんで解決策として唐突に"ovefflow: hidden;"の事が出てきたり、フッター部分にclearプロパティを使用しているのだろう…と腑に落ちない事だらけですが、ここに記述されていない部分（おそらくミドルコンテンツの子要素あたりに）floatを使用してらっしゃるんですよね？他の回答者様もおっしゃっている通り、ご質問文中のソースだけでは「Firefox3,Opera8.5、NS7等」でも「コンテンツの白色の背景を記述しているのに、なぜか色がでず、両脇の背景色が表示されて」しまうという状況は再現されないからです。ソースそものものを見ても、特に今回の様な状況を引き起こす様な点は見受けられませんし。

ですので、おそらく質問者様の抱えているトラブルの原因となるのは「div id="mdl"の中の左サイドバーと右コンテンツ」という子要素の方にあると推測されるのですが？ましてや、に"ovefflow: hidden;"を適用したら起こってしまったという：

> ■IE6でコンテンツが終わっていないのに、途中で切れてフッターが出現してまう
> ■ミドルコンテンツであるdiv id="mdl"の中の左サイドバーと右コンテンツが両端に離れてしまい、間が開きすぎてしまう。

これらのポイントはまさにその（提供されていない）部分の中にある事ですので、そちらのマークアップ及びCSSの指定を補足して頂かないと原因の特定はできないかと思われます。

※本件のご質問の原因とは（今のところ）関係ありませんが、CSSで気になった点を指摘させて頂きます。

div#hdr {
_width: 902px;/*IE対策*/
}
paddingやborderを併用しているわけでもないのにIEだけ2px多い理由が不明です（他の同様の箇所も）。

div#hdr-wrap {
top:0px;
}
positionプロパティを指定（relativeやabsolute）している部分がないのに、topプロパティを指定している意味が不明（他の同様の箇所も）。positionプロパティのディフォルト値はstaticですから、この状態ではtopプロパティは適用対象とならず効果は無効です。

div#mdl {
border-left-color: 1px solid #000;
border-right-color: 1px solid #000;
}
border-color…としておきながら、指定した値がカラーだけではない為、無効になっています。

お礼

ご意見わかりました。ありがとうございました。

急ぎ仕上げ最優先の事情につき、以前制作したものベースで進行中！
よくある話です

回答No.3

OKwebb

#1です。
教えていただいたお礼に
添付ソースで動作させてみた(gifファイルは適当に変更)けど
Firefox3.0.6で問題なさそうなのですが・・・。
overflow: hiddenを入れても入れなくても違いがよくわからなかった。

お礼

そうですか、了解です。
お手数おかけいたしました。ご親身にどうもありがとうございました

回答No.2

noname#100277

backgroundの箇所の全てを以下に改めたらどうですか？
background-color
background-image

お礼

ありがとうございました。
ダメでした。

回答No.1

OKwebb

回答じゃないです。
すみません。

<div id="mdl-wrap">
<div id="mdl">
を定義してるcssが見つからないんですが
div#main-wrap {
div#main {
のことなのかな？
どうやってこれリンクしているのか、教えてもらえませんか。

お礼

Wao！わかりやすいようにID名を変更したのが、全部にゆきわたっていませんでした。
あなた様のおっしゃるとおりです。

main-wrap＝mdl-wrap
main＝mdl
です。

ご指摘いただいて本当にありがとうございます！

もし解決策わかったら教えてくださいませm(_ _)m