- 締切済み
CSSのpositionでフッターが最下に配置されてくれない
CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか? WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; 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#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; 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{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; 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 id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA--> コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- askaaska
- ベストアンサー率35% (1455/4149)
私IE7で これだけのソースをHTML化してみたけど いろいろデザイン上改善点はありそうだけど <div id="ftr-wrap">コンテンツ入る</div> は一番下に表示されたわよ。 > ミドルエリアのコンテンツの上 ここに載せていない もっと別のとこに問題あるんじゃない?
お礼
ありがとうございます。 解決しました! SEO優位性の絡みでpositionを色々といじっていたことが原因でした。