Insert div over flash in IE

Question

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

Yes Chris,

You have to set an attribute to flash embed code

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

This will work

Answer 2

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

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

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.

Answer 4

There is a better solution to this as adding that parameter does not always work especially if using flash object within a div.

At the end of the page register the flash object like so:

<script type="text/javascript">
    swfobject.registerObject('FlashIdName');
</script>

Then call a javascript function like so:

<script type="text/javascript">
    swfobject.registerObject('FlashIdName');
    Chk_Flash('FlashIdName');
</script>

This function does the following:

<script type="text/javascript">
function Chk_Flash(ToRegister)
{
   document.getElementById('FlashIdName').style.visibility = 'visible';
   return true;
}
</script>

And this works on all browsers 100%

---

You can also use:

document.getElementById('FlashIdName').style.visibility = 'hidden';

Now if you are calling actions on the div tag like for example:

document.getElementById('MyDiv').style.visibility = 'block';

or document.getElementById('MyDiv').style.visibility = 'none';

What you need to do is first do the div action then call the flash visibilty in that order:

document.getElementById('MyDiv').style.display = 'block';
document.getElementById('FlashIdName').style.visibility = 'visible';

Enjoy !

Answer 5

Use these value instead 'transparent':

wmode="opaque"

Answer 6

I was finally able to find a solution which would work on both all the browers.

If I used

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

, I would get the desired output on IE but not on firefox and if i used

<embed wmode="transparent" ></embed>

, i got the desired output in firefox but not ie.

So I decided to use both which works on all the browsers

 <!--[if IE]>
    <param name="wmode" value="transparent" />
 <![endif]-->

 <embed wmode="transparent" ></embed>