※ ChatGPTを利用し、要約された質問です(原文:IE6での表示がうまくいかず困っています)
このQ&Aのポイント
コーディングを勉強中なのですが、IE6での表示がうまくいかず、大変困っています。
他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。
CSSは以下です。
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;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}*html .clearfix{height:1%;}.clearfix{display:block;}@media print{#leftcol{display:none;}#twocols,#maincol{width:100%;float:none;}}
すみません!先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。
コーディングを勉強中なのですが、どうしても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;}
}
以上です、よろしくお願いいたします。
お礼
ありがとうございました。 大元の原因はIE8が入っている状況でIE6を利用するためにフリーソフトを利用して見ていたのが原因でした・・・。別のIE6のみインストールしているPCでは問題なく見ることができました。 申し訳ありませんでした!