Background image not scrolling in IE7 & 8

I'm having problems with the second background image behind the content not scrolling as it should in IE7 & 8. All is working fine in PC Firefox, Chrome, IE9, Mac Firefox, Safari, Chrome. In IE 7 & 8 the image that should be scrolling is sitting up by the top navigation bar, showing where it shouldn't.

Can someone please advise me how to fix this? Further complications are multiple background images, the drop shadow and rounded corner effects.

Here are the links to the site and the css:

http://www.susankurtzgraphics.com/OGS/A_PresentationPanel_Template.html

http://www.susankurtzgraphics.com/OGS/css/styles1.css

[Edited by sokogs on 09-Feb-12 16:01]

--
sokogs

Hi sokogs,

Don't take this the wrong way, but the markup and CSS for that page are so convoluted that I don't even know where to start pinpointing the problem!

For example, you really don't need to use z-index or absolute positioning for such a layout. You also have an awful lot of duplicated and unnecessary rulesets in your CSS which are very hard to follow.

I'd start by stripping the markup back to simple DIVs for the page container, header, menu, sidebars and content. Float the sidebar and content DIVs left. Set the mountain image as a background image on the page container. Use CSS gradients for the page and header backgrounds. Take advantages of CSS cascading and inheritance to avoid duplicating rules across different page elements.

You'll probably find that doing this fixes your IE7/8 issue straight away. If it doesn't, it'll certainly be much easier to isolate the problem.

Hope that helps

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/