Question

Possible Duplicate:
Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie?

I need some CSS help.
I have a page that has a full-width header div that contains an image.
The page also embeds a .swf using SWFObject (javascript) directly below this div.

My goal is to get the image to ‘overlap’ both the div and the .swf object, sort of like it is spilling into the .swf object.

This effect is working fine in FireFox on Mac, but it seems to fail on any PC browser (IE and FF).

Here is a live link to my page. http://printstuff.com

View it in FireFox on Mac to see what I’m trying to achieve, then view it on a PC to see the incorrect result.

You can see my CSS and JS files by viewing generated source on the live page.

Any help you can offer would be greatly appreciated.

Thanks.

Answer 1

I have added the following lines to your CSS file

---

#headWrapper {
  width: 100%;
  position: absolute;
  z-index:1;
}

#PSLogo img {
  width: 500px;
  position: absolute;
  top: -50px;
  left: -50px;
  z-index: 9999;
}

---

Also place your Flash object in a div with style=”position:relative”

Let me know if it works or not.