IE Layering Quirks: Cross-browser Flash and Z-index solution

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=""> </a>
<embed  src="flash.swf" width="300" height="600" type="application/x-shockwave-flash" wmode="opaque"></embed>


3 Responses to IE Layering Quirks: Cross-browser Flash and Z-index solution

  1. Marcel says:

    Thanks for this, wasn’t aware of the wmode parameter. Stacking divs on top of SWF works in IE now!

  2. artur says:

    You welcome!

  3. Willian says:

    Hello admin do you need unlimited articles for your site
    ? What if you could copy post from other websites, make it pass copyscape test and publish
    on your website – i know the right tool for you, just search in google:
    Ziakdra’s article tool

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: