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;}
}
以上です、よろしくお願いいたします。
お礼
CSSに「_」を入れるハックを使うことで 解決しました。ありがとうございました！ 紹介いただきましたツールも今度使ってみたいと思います。