CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください

Question

こんばんは、CSSのpositionで下部にフッタを固定する為に設定したらwinIE６で見るとフッタだけ右にずれてしまいます。
当方Mac、osXで主にドリームウィーバーに手打ちです。safari、frefoxではずれませんでした。ソースを省略すると原因が分からないのでCSSを全部載せます。
アドバイスいただけると大変うれしいです。お願いいたします。

html,body{
text-align:center;
margin: 0px;
background:#FFFFFF;
height:100%;
}
#countainer{
    position: relative;
height: 100%;
min-height:100%;
}
#contents {
        padding-bottom:50px;
}
#header{
height:106px;
background-image: url(img/headbg.gif);
background-repeat: repeat-x;
}
#logo {
width: 800px;
height: 96px;
text-align: left;
padding: 10px 0 0 0;
margin: auto;
background-image: url(img/bg_navi.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
}
#logo img{
float: left;
}
#navi{
width: 600px;
float: right;
}
#navi ul{
margin:75px 11px 0 0;
padding:0;
}
#navi li{
width: 100px;
height: 21px;
float: right;
margin:0;
padding:0;
list-style-type:none;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 100%;
background-image: url(img/bg_navi.gif);
background-repeat: no-repeat;
background-position: 0% 100%;
}
#navi a:link,#navi a:visited{
color:#635142;
padding: 0 0 0 12px;
}
#navi a:hover{
color:#FF6633;
text-decoration:none;
}
#navi a.s:link,#navi a.s:visited{
color:#B59980;
}

#main{
width: 800px;
margin: auto;
text-align:left;
font-size:80%;
}

#main .topimg{
width:500px;
float:left;
text-align: center;
}
#main .news{
width:300px;
height:300px;
float:right;
background:url(images/bg_news.gif) no-repeat 0px 20px;

}

#main .news p{
margin:50px 40px 0px;
color: #5D4F41;
line-height: 150%;
font-size: 12px;
}


#main .body{
width:550px;
float:left;
clear:both;
}

#main .body p{
margin:10px 5px;
}

#main .menu{
width:183px;
float:left;
font-size:12px;
}

#main .tabmenu{
width:250px;
float:right;
}

#main h1 span.jp{
font-size: 12px;
letter-spacing: normal;
font-family:"ＭＳ Ｐゴシック","Osaka","ヒラギノ角ゴPro";
}


#main h2{
margin: 30px 0 5px 0;
padding:3px;
border-bottom: 4px double #83684F;
font-size:180%;
color: #333333;
clear: both;
}
#main h3{
margin: 30px 0 5px 0;
padding:3px;
background-color: #83684F;
font-size:120%;
color: #FFFFFF;
clear: both;
}
#main th{
padding: 3px 5px;
background-color: #F3EBDC;
border-bottom:1px solid #83684F;
text-align:left;
font-weight: normal;
color:#A07D5E;
}
#main a.mail{
padding:5px 0 5px 30px;
background:url(images/btn_mail.gif) no-repeat 0px 0px;
color: #FF0000;
}
#main a.mail:hover{
background:url(images/btn_ov_mail.gif) no-repeat 0px 0px;
}
#main .box{
width:183px;
float:left;
}
#main .box img{
margin:0 8px;
filter:chroma(color=#FFFFFF);
}
#main .box h3{
margin: 0 10px;
padding: 3px;
font-size:100%;
color:#A07D5E;
position: relative;
top: -10px;
background-color: #F3EBDC;
}
#main .box p{
margin: 0 10px;
padding: 0;
font-size:10px;
top: -5px;
position: relative;
}

#footer{
clear:both;
color:#666;
font-family: Arial, Helvetica, sans-serif;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #D8D8D8;
position: absolute;
bottom: 0px;
margin:auto;
text-align: center;
font-size: 75%;
height: 30px;
width: 100%;
}
#main .body #mn6 {
margin-top: 20px;
}


/*----------------------------span-*/

span.tel{
font-size:24px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#424242;
line-height: 24px;
}

/*-------------------------------------for any--*/

.clear{
clear:both;
line-height:1px;
}
#main .body  p {
margin-left: 15px;
}
#main .topimg {
margin-top: 20px;
}

tsunami02 · Accepted Answer

暇だったので、こっちで確認してみました。スタイルのフッターは下記にしてください。絶対値がしていしてありました、これだと固定の場所にとどまってしまいます。こちらはIE7しかないので7で確認しています。 -----------------------------------------------------------#footer{ color:#666; font-family: Arial, Helvetica, sans-serif; border-top-width: 3px; border-top-style: solid; border-top-color: #D8D8D8; bottom: 0px; text-align: center; font-size: 75%; height: 30px; width: 100%; } ----------------------------------------------------------- それとHTMLの記述も間違っています。
の入れ忘れがあります。 tabmenuのフローとの影響を消してないので下に影響を受けてました。フローとを使ったら下に影響がでないようにクリアーしましょう。 ----------------------------------------------------------- ? ? 無題ドキュメント

NEWS

文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

Product Catalog

トピックス用に
メニューその他
メニューその他
メニューその他
メニューその他
メニューその他

Contact Us:

mania@maniamania

----------------------------------------------------------- これで、IE7では崩れていません。

SAYKA · Answer

あまり関係ない気がするんだけれど
clear:both
って何の為に記述されてるのかな？


もしこれが他からの影響を受けないようにするために書いてるのだとしたら若干意味が無くなる場合が・・・

tsunami02 · Answer

#countainerの幅が指定してないですね。もしここで幅の指定をしないなら#footerで幅を100%ではなくピクセルで指定しないと100%が出ないんじゃないですかね。それと関係ないですがcolor:#666;て色ありますか。

yayopix · Answer

こんにちは！

しばらくWeb作成から離れていますので・・なんとなくです・・。
プログラムってやらなくなると、すぐ忘れちゃいますよね・・。

#footer{
clear:both;
color:#666;
font-family: Arial, Helvetica, sans-serif;
border-top-width: 3px;
border-top-style: solid;
border-top-color: #D8D8D8;
position: absolute;
bottom: 0px;
margin:auto;
text-align: center;
font-size: 75%;
height: 30px;
width: 100%;
}

ーーーーーーーーーーーーーー
position: absolute;
bottom: 0px;
この２つの必要性が分かりません・・。
外してみてください。

他にもムダな指定や間違いがあるような気がしますが・・
なにせ、確信がないので止めておきます。
こちらの間違いだったら恥ずかしいので・・。(=_=)

それぞれ確認してOKだったらよし！ということで・・・。

ちなみにこの作り方の場合、Macのブラウザで文字を大きくしたらどうなるかは確認済みですよね。

CSSのpositonでフッタを下部に固定したのですがIE6でズレてしまう原因が分からないので教えてください

あまり関係ない気がするんだけれど

この回答への補足

#countainerの幅が指定してないですね。

この回答への補足

こんにちは！

暇だったので、こっちで確認してみました。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング