CSS IE6でのabsoluteズレ

質問

フッターがブラウザに合わせて下部に固定するようにしていて
フッターは横幅100%にしています。

他のブラウザでは全く問題ありませんが、IE６で見ると右にかなりずれて表示されてしまいます。

以下HTMLソース--------------------------
<div id="footer">
<div class="foot"><a title="トップにもどる" href="#top"><img src="common/images/pagetop.gif" alt="ページTOP" /></a></div>
</div>

以下CSSソース--------------------------
#footer{
position:absolute;
bottom:0px;
height:20px;
width:100%;
background-image: url(../images/footbg.gif);
background-repeat: repeat-x;
}

#footer .foot{
margin-left: auto;
margin-right: auto;
width:950px;
}

#footer .foot img{
float: right;
padding-top:1px;
}

position:absolute;をとると下固定ではなくなりますが、ちゃんと真ん中に表示されます。
改善策をご教授願います。
よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

＞left:-1px

　問題はありませんが、他の標準ブラウザでずれてしまったら、ダメです。すくなくとも現状もっともウェブ標準に近いfirefoxなどで表示確認はしてください。

　最初に
html,body{
margin:0;
padding:0;
}
を書いておいたら？

　原因のひとつに、<div id=footer>が他の親コンテナブロックに含まれているということはありませんか？
　IE6は、標準と異なり自身のサイズや位置を算出するとき、本来はpadding辺の内側を参照すべきところを間違えています。
　1px程度のずれと言うことは、それが原因ではないかと・・

お礼

補足回答ありがとうございます！
Firefox等のブラウザでは確認済みです。とくに問題ありませんでした。

＞最初に
＞html,body{
＞margin:0;
＞padding:0;
＞}
＞を書いておいたら？

こちらは最初から設定してあります。

＞原因のひとつに、<div id=footer>が他の親コンテナブロックに含まれているということはありませんか？

wrapperの中に含まれております。

<div id="wrapper">

<div id="header"></div>
<div id="main"></div>

<div id="footer">
<p><a title="トップにもどる" href="#top"><img src="common/images/pagetop_o.gif" alt="ページTOP" /></a></p>
</div>

</div>

上記のような感じです。
今回の件、修正版は見た目には問題ありませんが、やはり-1pxは無理やりなような気がして
腑に落ちない感じです。
完全に自分の力不足ですね…。。ご丁寧にありがとうございました。

回答No.2

ORUKA1951

<div id="footer">
<p><a title="トップにもどる" href="#top"><img src="common/images/pagetop.gif" alt="ページTOP" /></a></p>
</div>

#footer{
position:absolute;
bottom:0;height:20px;width:100%;
background: url(../images/footbg.gif) repeat-x;
text-align:center;/* IE6対策 */
}
#footer p{
margin-left: auto;
margin-right: auto;
width:950px;
text-align:right;
}

で良いかと。CSS2では、出発点となるセレクタを書くのが基本です。単に.footじゃなくp.footとか、.footは*.footと解釈されます。また、div.footなんて余分なことは書かない。#footerの子供のpなら、#footer p{}でよい。

お礼

ご回答とソースありがとうございます。

また、アドバイスの方もありがとうございました。
上記で試してみたのですが、やはりズレたままでした。。

なので#footerに
left:-1px

を追加したところ解消されました。
こちらで勝手に考えて追加したものなのですが、この記述で問題はないでしょうか。

#footer{
position:absolute;
left:-1px;
bottom:0;height:20px;width:100%;
background: url(../images/footbg.gif) repeat-x;
text-align:center;/* IE6対策 */
}
#footer p{
margin-left: auto;
margin-right: auto;
width:950px;
text-align:right;
}

回答No.1

noname#158634

そりゃabsoluteだからねえ。
「absolute」っていう単語の意味知ってます？

https://www.google.com/search?hl=ja&lr=lang_ja&ie=UTF-8&oe=UTF-8&q=css+absolute+%E3%82%BB%E3%83%B3%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&num=50

お礼

ご回答ありがとうございます。
すみません。。解っていたつもりだったんですけど、力不足で。。。

ご丁寧にリンクありがとうございました。