Forums
This topic is locked
Background image not showing up in IE 7
Posted 25 Mar 2008 05:27:26
1
has voted
25 Mar 2008 05:27:26 naomi ellis posted:
None of my background images are displaying in IE 7, but are fine in Firefox. Here is the code - I didn't include it for the entire page, as there is a lot. I don't have it online yet, so sorry in advance.Any help would be much appreciated - this has been racking my brain for days!! I have tried placing z-index, and have made sure the image paths are relative. The only image that appears is the one I inserted as an image in the html.
<body>
<div id= wrapper>
<div id=navigation>
<div id="home"><img src="images/doghouse.gif" alt="home" width="85" height="105" id="Image1" />
<div id="homebackground"></div>
<div id="hometext">home</div>
<div id="printsmenu"></div>
<div id="printsbackground"></div>
<div id= "printstext">prints</div>
<div id="tshirtmenu"></div>
<div id="tshirtbackground"></div>
<div id="tshirttext">tee's</div>
<div id="aboutmenu"></div>
<div id="aboutbackground"></div>
<div id="abouttext">about</div>
<div id="stuffmenu"></div>
<div id="stuffbackground"></div>
<div id="stufftext">stuff</div>
<div id="contactmenu"></div>
<div id="contactbackground"></div>
<div id="contacttext">contact</div>
</div><!--home-->
</div><!--navigation-->
And here is the css associated with this code:
body, html {
background-color: #28309a;
height: 100%;
}
#wrapper {
background-color: #28309a;
width: 1000px;
margin: 0 auto;
overflow:visible;
height: 100%;
}
#navigation {
background-image:url(../images/filmstrip.png);
background-repeat: repeat-y;
background-position: center;
width:172px;
float: left;
height: 100%;
position: absolute;
}
#home {
background-image:url(../images/doghouse.gif);
background-repeat:no-repeat;
width:82px;
height:89px;
margin-left: 42px;
}
#homebackground {
background-repeat: no-repeat;
background-image:url(../images/bluebox1.gif);
width: 100px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
}
#hometext {
width: 82px;
height: 25px;
margin-left: 2px;
margin-top: -36px;
font-family: "Comic Sans MS";
font-size: 20px;
text-align: center;
font-weight: bolder;
}
#printsmenu {
background-image: url(../images/printsmenu.gif);
background-repeat:no-repeat;
width: 100px;
height: 130px;
margin-top: 10px;
}
#printsbackground {
background-image:url(../images/bluebox1.gif);
background-repeat: no-repeat;
width: 100px;
height: 30px;
margin-left: 5px;
margin-top: -5px;
}
#printstext {
width: 82px;
height: 25px;
font-family: "Comic Sans MS";
font-size: 20px;
text-align: center;
font-weight: bolder;
margin-top: -37px;
margin-left: 2px;
}
#tshirtmenu {
background-image:url(../images/tshirt.gif);
background-repeat: no-repeat;
width: 110px;
height: 130px;
margin-top: 15px;
margin-left: -8px;
}
#tshirtbackground {
background-image:url(../images/bluebox1.gif);
background-repeat:no-repeat;
width: 100px;
height: 30px;
margin-left: 5px;
margin-top: -40px;
}
#tshirttext {
width: 82px;
height: 25px;
font-family: "Comic Sans MS";
font-size: 20px;
text-align: center;
font-weight: bolder;
margin-top: -37px;
margin-left: 2px;
}
#aboutmenu {
background-image:url(../images/aboutmenu.gif);
background-repeat: no-repeat;
width: 110px;
height: 130px;
margin-top: 8px;
margin-left: -8px;
}
#aboutbackground {
background-image:url(../images/bluebox1.gif);
background-repeat:no-repeat;
width: 100px;
height: 30px;
margin-left: 5px;
margin-top: -50px;
}
#abouttext {
width: 82px;
height: 25px;
font-family: "Comic Sans MS";
font-size: 20px;
text-align: center;
font-weight: bolder;
margin-top: -37px;
margin-left: 2px;
}
#stuffmenu {
background-image: url(../images/stuff.gif);
background-repeat: no-repeat;
width: 110px;
height: 130px;
margin-top: 10px;
margin-left: -2px;
}
#stuffbackground {
background-image:url(../images/bluebox1.gif);
background-repeat:no-repeat;
width: 100px;
height: 30px;
margin-top: -70px;
margin-left: 5px;
}
#stufftext {
width: 82px;
height: 25px;
font-family: "Comic Sans MS";
font-size: 20px;
text-align: center;
font-weight: bolder;
margin-top: -37px;
margin-left: 2px;
}
#contactmenu {
background-image:url(../images/contact.gif);
background-repeat: no-repeat;
width: 110px;
height: 130px;
margin-top: 10px;
}
#contactbackground {
background-image:url(../images/bluebox1.gif);
background-repeat:no-repeat;width: 100px;
height: 30px;
margin-top: -25px;
margin-left: 5px;
}
#contacttext {
width: 82px;
height: 25px;
font-family: "Comic Sans MS";
font-size: 20px;
text-align: center;
font-weight: bolder;
margin-top: -37px;
margin-left: 2px;
}
Replies
Replied 12 Apr 2008 20:51:04
12 Apr 2008 20:51:04 Richard H replied:
try removing the " ../ " before the rest of the url tag
<pre id=code><font face=courier size=2 id=code>background-image:url(images/bg.png); </font id=code></pre id=code>
Edited by - Redxzed on 12 Apr 2008 20:52:19
<pre id=code><font face=courier size=2 id=code>background-image:url(images/bg.png); </font id=code></pre id=code>
Edited by - Redxzed on 12 Apr 2008 20:52:19