All background images disappear in IE 6, 7, and 8

[bruizerbeans]

Here is my demo page. http://www.appleheadwebdesign.com/demo/index.html

It Shows up in Fire fox and Opera but I can’t seem to get it to show up in IE 6, 7 or 8.

here is my css

Code:

* {
margin:0;
padding: 0;
}
body{
background: url(images/pageWrapbg.jpg) no-repeat fixed 0 0 #784510;
}

#pageWrap {
margin: 0 auto;
position: relative;
width: 960px;
}

h1#envyName {
background: url(images/envyLogo.png)no-repeat scroll 13px 0 transparent;
display: block;
height: 244px;
margin: 0 auto;
width: 552px;
}

h1#envyName span {
display: none;
}

h1.title, h2.title {
font-family: ‘VeteranTypewriterRegular’, sans-serif;
color: #d34a08;
}

h2.title{
padding-left: 90px;
padding-top: 20px;
letter-spacing: 2px;
}

p.text {
font-size: 20px;
line-height:35px;
font-family: ‘VeteranTypewriterRegular’, sans-serif;
color: #d34a08;
padding-top: 20px;
width: 275px;
}

#nav_wrapper {
background: url(images/navWrapper.jpg)no-repeat scroll center top transparent;
height: 67px;
width: 780px;
margin: 0 auto;

}

a.navs{
display: inline;
font-size: 17px;
line-height:normal;
font-family: ‘VeteranTypewriterRegular’, sans-serif;
color: #d34a08;
text-decoration: none;

padding-right: 15px;

}

#navBar {
background: url(images/navbg.png)no-repeat scroll 0 5px transparent;
width: 400px;
height: 67px;
margin: 0 auto;
padding-top: 20px;
padding-left: 25px;
}

#pageContent {
background: url(images/content.jpg)no-repeat scroll center top transparent;
width: 700px;
margin: 0 auto;
height: 319px;
padding: 20px 45px;
}

#footerContent {
background: url(images/footer.jpg)no-repeat scroll center top transparent;
width: 757px;
margin: 0 auto;
height: 48px;
}
#footerBTM {
background: url(images/footerbottom.png)no-repeat scroll center top transparent;
width: 757px;
margin: 0 auto;
height: 178px;
}
.clear:after{
clear:both;
content: “.”;
display: block;
height: 0;
visibility: hidden;
}

[bruizerbeans]

Ok, I solved it.

Apparently IE doesn’t recognize shorthand when it comes to adding background images. However, it did recognize the shorthand written on the body tag. Go figure!

[bruizerbeans]

even though this post was solved I do have a question. Why wont shorthand work on background images in IE?

[powelstag]

Yes you are absolutely true.So many of us have the same problem.I think first you should look after for the following points:
1. Page elements are narrower in Internet Explorer
2. Text spilling out of its container in non-IE browsers
3. Disappearing background images
4. Widths only working on IE
5. Unstyled version of web page appearing in IE
6. Fixed width web page not sitting in centre of window

[TheDoc]

Hmmmm. I’ve never had any of my own personal shorthand not work. There could’ve been something wrong with the shorthand that you used, but FF ignored the error and displayed what you had intended.

[virtual]

I have never had a problem with shorthand in IE browsers either. However your image will not show in IE if you do not leave a space between the bracket and the next comment e.g.
h1#envyName {
background: url(images/envyLogo.png)no-repeat scroll 13px 0 transparent;}
The above image will not show as there is no space between .png) and no-repeat.
Written this way the background image will show
h1#envyName {
background: url(images/envyLogo.png) no-repeat scroll 13px 0 transparent;}

[bruizerbeans]

"virtual" wrote:

I have never had a problem with shorthand in IE browsers either. However your image will not show in IE if you do not leave a space between the bracket and the next comment e.g.
h1#envyName {
background: url(images/envyLogo.png)no-repeat scroll 13px 0 transparent;}
The above image will not show as there is no space between .png) and no-repeat.
Written this way the background image will show
h1#envyName {
background: url(images/envyLogo.png) no-repeat scroll 13px 0 transparent;}

Thanks. This makes more sense. Now I see where I went wrong with my shorthand.
thank you.

[zeshan]

Here is the Perfect Solution
it’s always work for me…

background: url(images/footerbottom.png) no-repeat center top transparent;

/* note that now there IS a space after url() part */

[Author]

Posts