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

質問

こんばんは、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;
}

回答No.4

tsunami02 · ベストアンサー

暇だったので、こっちで確認してみました。
スタイルのフッターは下記にしてください。
絶対値がしていしてありました、これだと固定の場所にとどまってしまいます。こちらは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の記述も間違っています。
<br class="clear" />の入れ忘れがあります。
tabmenuのフローとの影響を消してないので下に影響を受けてました。
フローとを使ったら下に影響がでないようにクリアーしましょう。
-----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
<html xmlns="?http://www.w3.org/1999/xhtml">?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>無題ドキュメント</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="countainer">
<div id="contents">
<div id="header">
<div id="logo"><img src="img/logocolor.gif" alt="#" width="191" height="54" />
<div id="navi">
<ul>
<li><a href="#">求人情報</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">会社案内</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#" class="s">ホーム</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<div class="topimg"><img src="img/top.jpg" alt="umi" width="405" height="250" /></div>
<div class="news">
<p>NEWS</p>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。<br />
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</div>
<br class="clear" />
<div class="body">
<h1>Product Catalog </h1>
<div class="menu" id="mn1"><a href="#" onmouseover="MM_swapImage('m01','','images/mn_ov_01.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Cotton" name="m01" width="150" height="99" id="m01" /></a>
<p>111</p>
</div>
<div class="menu" id="mn2"><a href="#" onmouseover="MM_swapImage('m02','','images/mn_ov_02.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Pattern" name="m02" width="150" height="99" id="m02" /></a>
<p>111</p>
</div>
<div class="menu" id="mn3"><a href="#" onmouseover="MM_swapImage('m03','','images/mn_ov_03.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Variety" name="m03" width="150" height="99" id="m03" /></a>
<p>111</p>
</div>
<div class="menu" id="mn4"><a href="#" onmouseover="MM_swapImage('m01','','images/mn_ov_01.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Cotton" name="m04" width="150" height="99" id="m04" /></a>
<p>111</p>
</div>
<div class="menu" id="mn5"><a href="#" onmouseover="MM_swapImage('m02','','images/mn_ov_02.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Pattern" name="m05" width="150" height="99" id="m05" /></a>
<p>11</p>
</div>
<div class="menu" id="mn6">
<p>詳しくは,各項目よりご覧頂けます。</p>
</div>
<br class="clear" />
</div>
<div class="tabmenu">
<div class="tabimg"><img src="images/tab_menu.gif" alt="menu" width="200" height="21" /></div>
<ul>
<li><a href="#sample">トピックス用に</a></li>
<li><a href="#sample">メニューその他</a></li>
<li><a href="#sample">メニューその他</a><a href="catalog.html"></a></li>
<li><a href="#sample">メニューその他</a></li>
<li><a href="#sample">メニューその他</a></li>
<li><a href="#sample">メニューその他</a></li>
</ul>
<p><span class="tel">Contact Us:<br />
</span></p>
<p>mania@maniamania</p>
</div><br class="clear" />
</div></div>
<div id="footer">Copyright (C) CO.,LTD All Right Reserved </div>
</div>
</body>
</html>
-----------------------------------------------------------
これで、IE7では崩れていません。

お礼

こんばんは、大変丁寧にご回答いただき問題を解決する事が出来ました。CSSは難しいです....
・フロートは後に影響でないように絶対クリアする事。
・フッターを絶対指定にしない。
以上、覚えました。これにめげずにがんばりたいと思います。
本当貴重なお時間を割いていただきありがとうございました。

回答No.3

noname#107580

こんにちは！

しばらく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のブラウザで文字を大きくしたらどうなるかは確認済みですよね。

お礼

こんばんは、
position: absolute;
bottom:0px;などがあやしいのですね、
いろいろ試してみたいと思います。作成から離れていても
知恵を貸していただきありがとうございます。

回答No.2

tsunami02

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

補足

ご回答ありがとうございます。
#countainerの幅ですが、指定してみたのですが変わりませんでした。
colorですが、#666で薄いグレーになります。

もし最後迄見ていただける方がいることを願い、現在のソースをのせます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>無題ドキュメント</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="countainer">
<div id="contents">
<div id="header">
<div id="logo"><img src="img/logocolor.gif" alt="#" width="191" height="54" />
<div id="navi">
<ul>
<li><a href="#">求人情報</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">会社案内</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#" class="s">ホーム</a></li>
</ul>
</div>
</div>
</div>
<div id="main">
<div class="topimg"><img src="img/top.jpg" alt="umi" width="405" height="250" /></div>
<div class="news">
<p>NEWS</p>
<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。<br />
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
</div>
<br class="clear" />
<div class="body">
<h1>Product Catalog </h1>
<div class="menu" id="mn1"><a href="#" onmouseover="MM_swapImage('m01','','images/mn_ov_01.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Cotton" name="m01" width="150" height="99" id="m01" /></a>
<p>111</p>
</div>
<div class="menu" id="mn2"><a href="#" onmouseover="MM_swapImage('m02','','images/mn_ov_02.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Pattern" name="m02" width="150" height="99" id="m02" /></a>
<p>111</p>
</div>
<div class="menu" id="mn3"><a href="#" onmouseover="MM_swapImage('m03','','images/mn_ov_03.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Variety" name="m03" width="150" height="99" id="m03" /></a>
<p>111</p>
</div>
<div class="menu" id="mn4"><a href="#" onmouseover="MM_swapImage('m01','','images/mn_ov_01.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Cotton" name="m04" width="150" height="99" id="m04" /></a>
<p>111</p>
</div>
<div class="menu" id="mn5"><a href="#" onmouseover="MM_swapImage('m02','','images/mn_ov_02.gif',1)" onmouseout="MM_swapImgRestore()"><img src="img/product.gif" alt="Pattern" name="m05" width="150" height="99" id="m05" /></a>
<p>11</p>
</div>
<div class="menu" id="mn6">
<p>詳しくは,各項目よりご覧頂けます。</p>
</div>

<br class="clear" />
</div>
<div class="tabmenu">
<div class="tabimg"><img src="images/tab_menu.gif" alt="menu" width="200" height="21" /></div>
<ul>
<li><a href="#sample">トピックス用に</a></li>
<li><a href="#sample">メニューその他</a></li>
<li><a href="#sample">メニューその他</a><a href="catalog.html"></a></li>
<li><a href="#sample">メニューその他</a></li>
<li><a href="#sample">メニューその他</a></li>
<li><a href="#sample">メニューその他</a></li>
</ul>
<p><span class="tel">Contact Us:<br />
</span></p>
<p>mania@maniamania</p>
</div>
</div></div>
<div id="footer">Copyright (C) CO.,LTD All Right Reserved </div>
</div>
</body>
</html>

回答No.1

SAYKA

あまり関係ない気がするんだけれど
clear:both
って何の為に記述されてるのかな？

もしこれが他からの影響を受けないようにするために書いてるのだとしたら若干意味が無くなる場合が・・・

補足

回答ありがとうございます。
フッター部分のclear:bothのことでしょうか？

一応本文は　#countainerでフッタ迄を囲っている形です。
分かりにくくてすいません。