IE6での表示がうまくいかず困っています

質問

すみません！先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。

コーディングを勉強中なのですが、どうしてもIE6での表示がうまくいかず、大変困っています。色々ググって調べてみたのですが、決定的な原因がわからず本当にどうすればよいのかわかりません・・・。どなたかご教示いただけませんでしょうか。

他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。

CSSは以下です。
/* generated by csscreator.com */
html{
height:100%;
}
body{
margin:0;
padding:0;
text-align:center;
color: #fff;
background: #000000 url("../images/back-right.gif") repeat-x;
position: relative;
text-decoration: none;
height:100%;
}
body > #pagewidth {
height: auto;
}
img {
border-style:none;
}
ul{
margin:0;
padding:0;
text-align:left;
}
li{
list-style-type: none;
line-height:100%;
}
p{
margin:0;
padding:0;
text-align:right;
}
#bg_wrap {
height: 423px;
width: 50%;
top: 0px;
background: url(../images/back-left.gif) repeat-x;
position: absolute;
}
#pagewidth{
width: 918px;
height: 100%;
min-height: 100%;
text-align:left;
margin: 0px auto;
position: relative;
background: url(../images/left-col.gif) left repeat-y;
}
#left-container{
width: 130px;
height: 100%;
float:left;
position:relative;
padding-left: 23px;
}
#header{
width: 100%;
height: 266px;
color: #000;
background-color: #fff;
}
#navigation{
width: 100%;
color: #fff;
padding-bottom: 5em;
}
#main-container{
width: 764px;
float: right;
display:inline;
position: relative;
}
#maincontents{
padding-right: 21px;
}
#footer{
height: 50px;
width: 100%;
text-align:left;
padding-left: 95px;
clear: both;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}

以上です、よろしくお願いいたします。

回答No.1

noname#119957 · ベストアンサー

ＤＯＭツールで見ると、#maincontentsの横幅が、IE６とｆｉｒｅｆｏxでは異なり、ＩＥ６では大きくなっています。
この部分が問題かと思います。（見た目の判断です。確認したわけではありません。）
#maincontents内の画像幅と#maincontenstの幅をそろえれば？
あと、幅を指定したコンテナ内の画像にはdisplay:blockを忘れずに。
それと、マージンリセットは、
*{
margin:0; padding:0;
}
の方がシンプルでやりやすいのでは？
と思います。

お礼

ありがとうございました。
大元の原因はIE8が入っている状況でIE6を利用するためにフリーソフトを利用して見ていたのが原因でした・・・。別のIE6のみインストールしているPCでは問題なく見ることができました。
申し訳ありませんでした！