Internet Explorer Nightmare

[Tindris]

So, after having a fight with my CSS for hours I am starting to give up. I have coded up a simple double background layout with an image positioned with :absolute; on top of it. When I open the page in IE 6, 7 or 8 then the main body background and the positioned image do not show up. I have been trying to fix it for ages with no luck and was hoping someone may have a solution.

http://gfxtutorials.com/tindris/ <-- A link to the temporary page I have been using. It is the purple background and the logo that won't show up in older versions of IE

 

[Rick Ace]

Internet Explore is always a nightmare. Perhaps, if you google your problem, there may be a Javascript fix.

And there may be no hope for IE 7 (forget about 6 😛 ).

 

[Joshua Farrell]

I am assuming that the logo is supposed to be in the white area? It is showing all the way on the left, and not in that white area.

 

[Tindris]

Well, the logo is meant to be out to the left, but its meant to stay with the background too if that makes sense

 

[JamesD31]

1) Never heard of and never used background-attachment - and I am a very proficient web designer, so that's probably not needed.

2) when naming your things I suggest you have the wrapper outside of the "content." It makes more sense. The "wrapper" should house the "content" as well as things like "sidebar", etc but that's just a nice naming issue no biggy

3) your forgetting a lot of normal thigns to plug into your body:

body {
background: url('../image/bokehbg.png')no-repeat center center;
background-attachment:fixed;
}

change to

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    background: ur(../images/bokehbg.png) no-repeat center;
}

* Note: change the font-family to whatever.
* Note2: when doing the url() for the image, remove the single quotations as that gives some problems and means something completely different than what you are looking to do.

rest of your css updated to what I think it should be:

#header {
    width: 500px;
    height: 200px;
    margin: 40px 0 0 -30px;
    padding: 0;
    background: url(../image/headerbg.png) no-repeat;
    position: absolute;
    z-index: 2;
}

#wrapper {
    width: 90%;
    margin: 0 auto;
    background: url(../image/tbg.png) no-repeat center;
}

#content {
    width: 98%;
    margin: 0;
    background: #FFF;
}

I had switched the #wrapper and #content around (do so in the HTML as well, other wise change the names back in the CSS I made).

I got rid of a lot of unnecessary and weird code that I have no idea why you were throwing it in there.

Try my CSS and let me know if it fixes your IE problems, I did just test it out in IE and couldn't see one single image. It could have been due to the body missing some code but idk.

 

[Penhold]

I've just left caring about IE users.It's their problem they use it ( 😛 )....

 

[Deleted member 4320]

1) Never heard of and never used background-attachment - and I am a very proficient web designer, so that's probably not needed. *SNIP*

Yet you've not heard of background-attachment: fixed;? 😕

All background-attachment: fixed; does is make the background image stick when you scroll on the page so that wouldn't necessarily do anything anyway.

Also using Javascript would be a bad idea because if users have that turned off then the website breaks again. Making sure your code works on all browsers is the best way to go. If you code it right, you don't even need to add fixes and tweaks to designs.

I've had a quick look at the source code and position: absolute; will not fix it, if fact if you keep it in the CSS and just change other elements it won't move at all. What you need to do is have the purple background image, the background to body. Then you want to set the background of #wrap to the vertical background image that will house your content but make sure that the width of the wrap is the exact same as the background image and set it background-position: center;.

Lastly, you will need the logo to go inside the wrap because right now it isn't. Last of all I saw you have -30px to the left on the header div, which I'm pretty sure if you put inside the wrap, it's still going to be outside because it'll pull it back.

Hope that makes sense. You're welcome.