- ベストアンサー
100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#footerが#container内に無い可能性や#footerにright:0;を指定すると直る可能性があります(left:0;ではバグが出ます)
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
> しかし背景とコンテナー(背景白)の隙間が上下7pxほど空きます… > (bodyに引いた背景画像が見えている状態) 質問文中のソースだけ見るなら、単純に、bodyの初期値の余白を消していないからだけの様に思われますが。 body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ margin: 0;←追加 } これだけで、余白は解消されましたが。 ちなみに、本件の直接のご質問内容であった「IE6だと左寄せになって」しまう、という現象ですが、こちらでサンプルをそのまま試させて頂いた限りでは、オリジナルのままでもその様な現象は起こらず、ちゃんとセンタリングになりましたが? ※質問者様の過去の質問から、DOCTYPEはXML宣言なしのXHTML 1.0 Transitionalで試してみました。
お礼
試していただいてありがとうございます! あ、そうですね、 *{ margin:0; padding:0; } を入れればいいんですね、ありがとうございました!
お礼
さっそくありがとうございました! >footerがcontainer内に無い可能性 ちゃんとcontainer内に入ってるようです! >right:0; おお!確かにセンターになります! しかし背景とコンテナー(背景白)の隙間が上下7pxほど空きます… (bodyに引いた背景画像が見えている状態)