Insert div over flash in IE

Question

Hi,

I have a menu bar which has several submenu items. The homepage contains a flash animation which is located under the menu bar. When the submenu items are over the flash file, the flash file will be displayed over the menu bar. I tried with z-index, but it won't work.

This problem only happens in IE.

Any tips?

Thanks

Answer 1

Where you insert the flash file, you need to set the window mode to transparent:

<embed src="flashfile" wmode="transparent">

Answer 2

Yes Chris,

You have to set an attribute to flash embed code

<param name="wmode" value="transparent" />

This will work

Answer 3

Muneer and Tim already gave a good answer but I'd like to add some additional infos:

• Adobe's website has a documentation about Flash OBJECT and EMBED tag attributes
• transparent and opaque values will cause an accessibility problem, cause they hide the content of your flash object to screen readers. Only the default value of window is OK for screen readers
• z-index won't and can't do anything in your case: the object is managed by a plugin, the flash player or an alternative, and it do so quite outside the page rendered by the browser. It still interacts with it (width, height, JS) but as for rendering ...
• There is a similar issue with select elements in IE6 (and 7?) where no z-index value on a positioned element will render the latter over the select (this one is a bug due to the way IE considers select elements)
• you should test on OS X and Linux, there are quite a few issues with flash on these OSes.