CSS and IE7 Z-Index

Question

Ok, I'm stumped!

If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.

On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).

Here's the link.

Thanks.

Answer 1

IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu

In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:

• On #container remove position:relative .
• The z-index issue is now fixed, but everything is in the wrong position!
• On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
• On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
• On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.