背景色を設定しているのに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>
------------------------------------------------------------
お礼
すばやいご回答ありがとうございます。 おかげ様で解決しました！ 本当にありがとうございました。