IE Layering Quirks: Cross-browser Flash and Z-index solution
March 26, 2010 3 Comments
We all know IE is broken, but such is life. One problem you may run into is layering a DIV on top of a SWF. First order of business is setting your wmode attribute to opaque or transparent. The default is window, and while there are workarounds for SWFs outside of your control that is a post for another day.
The problem in IE is if your DIV doesn’t have content. Let’s say you have a SWF and you want to attach a click handler? Not possible unless it has content. Luckily IE counts the background CSS property as content, so you can fool it by overlaying the DIV on top of the SWF and setting the background and opacity to 0.
Example follows(click through attached to an animated SWF):
<a style="cursor: pointer;display: block; z-index: 1000; position: absolute; top: 0; filter: alpha(opacity=0); opacity: 0; background: white; width: 300px; height: 600px; " href="http://www.google.com/"> </a>
<embed src="flash.swf" width="300" height="600" type="application/x-shockwave-flash" wmode="opaque"></embed>