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);
}
補足
ありがとうございます!! 頂いたソースをそのまま置き換えてみたところ、イメージからは遠くなかったので、具合の悪いところだけを少々いじりました。 現状、↓のようになっています。 html,body{ margin: 0px; padding: 0px; position: relative; height: 100%; background-color: #; color:#; a:linkcolor:#; a:hover color:#; a:visited color:#; } hr{color:#} #header{ position: fixed; top: 0px; left: 0px; width: 100%; height: 5%; padding:0.5em 0em 0em 0em; background-color: #; z-index: 1; } #inner { position: fixed; top: 0px; left: 5%; width: 90%; height: 66%; padding: 4em 1em; background-color: #; border-top:solid 2px #; border-bottom:solid 2px # ; z-index: 0; overflow:auto; } #footer{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 10%; padding: 0em 0em 0.5em 0em; background-color: #; z-index: 1; } この状態で、Firefoxですとほとんど問題が解消され、あとはinnnerのborder-topが反映されればなぁ、と言う感じになっています。(何故かbottomの方は反映されているのです。) ちなみにheight: 66%;でないと、ヘッダとフッタの裏にボックスが隠れるようです。ヘッダとフッタのheightをいじると、これも変わるようなのですが。しかしこれを減らしても、innerの下辺が上がって来る(つまりヘッダとの間にhtmlのbgcolorが見えている状態?)になるだけで、border-topは表示されませんでした。何だかよく分かりません……。 padding: 4em 1emについては、出来れば4emの方を小さくしたいのですが、これはいじるとどこか崩れるでしょうか?(まだ試していません。) また、IEだと少々innerの見え方が違うのですが、まずhrに色が付かず、下辺は途中で切れており、最大化したウィンドウでは、border-bottomが反映されず(topももちろん反映されていません。と言うか前面に出て来ないのだと思うのですが。)、記事がギリギリまで見えている状態ですが、ウィンドウを小さくした場合、記事まで途中で切れるようになります。Firefoxではこの現象はありません。これは、z-indexを逆転させたら解消されるような単純な問題なのでしょうか? また、調整は自宅のPCのみで行っておるため、モニタが変わると見え方が変わるかどうかは試していないのですが、どうもそうなりそうな気がしています。環境に合わせて表示させるのが%指定だと思ったのですが、これはいかがでしょうか? 最後に、これはどうしてもではないのですが、ヘッダ内のテキストを、<h1>等で指定したいのですが、htmlの方で見出しのタグを入れると、必ずヘッダ部がinnerの中に落っこちます。仕方がないので現在はfont指定にしているのですが、これは解消出来るでしょうか? ご面倒かとは存じますが、よろしければ再度教えて下さい。 どうぞよろしくお願い致します。