IE-8 iframe and flash object ignore z-index?

Question

I have the following divs and I'm trying to make an iframe layer infront my_flash. This is a common problem, and I read all the solutions I could find, and yet I get problems in IE8. By the way, I'm using SWFobject.

Here is the source:

<script type="text/javascript"> swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0"); swffit.fit("my_flash",900,650); </script> <div id="my_flash" style="z-index:1;"></div> <div style="border:none; overflow:hidden; width:50px; height:21px; z-index:9999; position: absolute; bottom: 5px; left: 110px;" > <iframe src="http://www.facebook.com/plugins/like.php?blah.html" scrolling="no" frameborder="0" allowTransparency="true" style="z-index:9998"/> </div> 

Answer 1

Unfortunately, z-index does not affect Flash Player. See this example: http://demos.learnswfobject.com/html-over-swf/dynamic.html (Related tutorial )

In the above example, the parent element has position:"relative" , and the HTML element has position:"absolute" . SWF does not require position . None of the elements have a z-index . For SWF, wmode must be either opaque or transparent . wmode:"opaque" preferable to wmode:"transparent" , since transparent , as you know, causes problems and uses much more computing power than opaque .

Try the following:

 <style type="text/css"> /* establish relationship with child elements */ #wrapper { position: relative; } /* this element will automatically appear overtop of the wmode=opaque SWF without needing z-index */ #myiframe { position: absolute; } /* No CSS needs to be specified for the SWF */ #myswf { } </style> <div id="wrapper"> <iframe id="myiframe" src="mypage.html"></iframe> <div id="myswf">This will be replaced by SWFObject</div> </div> 

Answer 2

You must set the wmode parameter of the Flash object when embedding in SWFObject.

Here is a short tutorial for this.

Here is the modified code for your problem:

 <script type="text/javascript"> swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0", null, { wmode: "transparent" }); swffit.fit("my_flash",900,650); </script> 

Answer 3

 var flashvars = {}; var params = {}; params.wmode = "transparent"; var attributes = {}; swfobject.embedSWF("index.swf", "my_flash", "100%", "100%", "8.0.0", '/swfobject/expressInstall.swf', flashvars, params, attributes);