IE7 fixed positioning problem, even w/ie7.js from google

[azzcat]

Help! I’ve got a newly launched WordPress blog http://blog.franklyrealty.com/(that worked fine when it was static!) that’s now giving me grief in IE7. There’s a fixed, low z-index container for a background image that’s insisting on placing itself ON TOP OF ALL CONTENT. Ugh! I’ve loaded the google ie8 javascript library which is supposed to make it all behave, but no go.

I’ve also tried moving the offending div:
#paper_wrap /*presentational div container*/
{ position: fixed;
z-index: 100;
margin: 0 auto;
top: 0;
width: 100%;
height: 100%;
background: url(img/bkgd_paper960_leftMargin.png) no-repeat top center;
}
from the bottom of the page (within footer.php) to top of page (within header.php) and changing position to absolute. Nothing seems to work.

Any help will be greatly appreciated! Thanks!

[AshtonSanders]

Hey man,

Let me get this straight: the purpose of this div#page_wrapper is to apply the "paper" background image on top of the body, and below the content right?

If so, I’ve got a simple solution:

This is your current code:

Code:

body
{ position: relative;
z-index: 100;
background: url(img/bkgd_FranklyBlog.jpg) fixed top center;
}

#paper_wrap /*presentational div container*/
{ position: fixed;
z-index: 100;
margin: 0 auto;
top: 0;
width: 100%;
height: 100%;
background: url(img/bkgd_paper960_leftMargin.png) no-repeat top center;
}

Change it to this:

Code:

html
{ background: url(img/bkgd_FranklyBlog.jpg) fixed top center;
}

body
{ position: relative;
z-index: 100;
background: url(img/bkgd_paper960_leftMargin.png) fixed no-repeat top center;
}

And Delete that #Paper_wrap

Also, in the future, when you want a Div to surround your entire page, start the <Div> at the top of your page, and end the </div> at the bottom of your page. That’s how HTML works ;)

[azzcat]

Thanks Ashton. It originally started at the top. But then I couldn’t get the sticky footer to work. So it went to bottom. At some point I removed it entirely and changed the bottom background image to include "paper". But then I had to re-add that presentational div back…and I forget why now!

Anyway…I’ve resaved my background image (all fixed) with the paper as part of the texture. Then I’m able to remove the paper div entirely. Unfortunately, the "sticky footer" isn’t sticky in IE7–even with that javascript. Oh well. At least all the content is visible now! And it looks OK in IE8.

But hey, the Cufon font replacement is working throughout!

[Author]

Posts