CSS backgroundが反映されません
CSS初心者です。
CSSレイアウトで問題にぶつかりました。
下記CSSをIE6で見るとbodyに書いた
「background-image:url(images/flower.png); 」が反映されません。
IE10では反映されました。
いったい何故でしょうか。。。
調べてみたのですがいまいち分かりませんでした。
よろしくお願いいたします。
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
* {
margin:0;
padding:0;
}
body {
background-image:url(images/flower.png);
background-repeat:no-repeat;
background-position:bottom;
background-attachment:fixed;
background: rgb(#00000); color: rgb(76, 76, 76);
}
body{
text-align:center;
}
div#container {
background-image:url(images/sora.jpg);
background-repeat:no-repeat;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4); #000;
}
div#container{
width: 770px;
margin: 0 auto;
text-align: left;
border: 3px solid rgb(228, 225, 219);
}
.photo{
margin: 0px; padding: 0px; left: 600px; top: 970px; width: 141px; position: absolute;
}
.photo2{
margin: 0px; padding: 0px; left: 400px; top: 970px; width: 141px; position: absolute;
}
p {
line-height: 2em; font-size: 0.8em;
}
.p1{
font-weight: bold;
letter-spacing: 0.1em;
}
.h1{
text-align: center;
}
h1 span {
display:none;
}
h2 span {
display:none;
}
h3 {
line-height: 1.2em;
padding-top: 2.4em;
padding-bottom: 1em;
font-size: 1em;
font-weight: bold;
}
h3 {
background-image:url(images/h3.png);
background-repeat:no-repeat;
background-position:0px 35px;
padding-right: 40px; padding-left: 30px;
}
h2 {
line-height: 1.3em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 1em;
font-weight: bold;
}
a{
color:#0000ff;
font-style:normal;
text-decoration:underline;
}
a:link {
color: rgb(90, 120, 255);
font-style:normal;
text-decoration:underline;
}
a:visited {
color: rgb(165, 188, 255);
text-decoration:underline;
}
a:hover {
color:#ff0000;
font-style:normal;
text-decoration:underline;
}
acronym {
border-bottom-color: currentColor;
border-bottom-width: medium;
border-bottom-style: none;
}
#intro {
padding: 0px 79px 0px 86px;
}
#participation p {
padding-right: 40px; padding-left: 10px;
}
#intro {
padding-top: 50px;
}
#preamble p {
padding-right: 40px;
padding-left: 15px;
}
#explanation p {
padding-right: 40px;
padding-left: 15px;
}
#preamble {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#explanation {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#participation {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#benefits {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#requirements {
padding-bottom: 20pt; border-bottom-color: rgb(228, 225, 219); border-bottom-width: 3px; border-bottom-style: ridge;
}
#quickSummary p{
padding-right: 40px; padding-left: 10px;
}
#footer {
text-align: center;
line-height: 1.5em;
padding-top: 10px;
padding-bottom: 40px;
font-size: 0.9em;
}
#footer a:link {
color: rgb(133, 126, 112);
}
#footer a:visited {
color: rgb(133, 126, 112);
}
#footer a:hover {
color: rgb(133, 126, 112);
}
#footer a:active {
color: rgb(133, 126, 112);
}
お礼
早速の回答ありがとうございました。 http://openlab.ring.gr.jp/k16/htmllint/htmllintl.html は存じてましたが、http://jigsaw.w3.org/css-validator/ は、今回初めて利用しとても役に立ちました！ おかげさまで、原因がわかりました。 .cssを作成する時に多窓が面倒なのでファイルの空白の端の方にコピー用のタグを貼り付けながら作業し、 後からそれを全部消したつもりだったのですが...ちょうど<h1>にかかる位置にposition:absolute;の absoluteだけがちょこんと消し残っていました。（恥） こんなケアレスミスを３日がかりでも気がつかないなんて...やはり自分の目では見落としてしまうものですね。 文法チェックサイト＆教えてgooに感謝々です。