Why is my Flash animation overlaying my div position?

Question

I am using FancyBox to generate a popup image.

FancyBox (In case you are curious.)

It pops up a div with z-index: 92;.

I have a Flash animation running which is far below that z-index.

My problem is that in two different Firefox browsers (same versions) I have different results.

In one, everything appears OK. In the other, the Flash animation appears in front of the div. I have tried refreshing and restarting the browser but the same issue always occurs.

I know one of the screen shots is from IE but it is only meant as a reference.

What could I be doing wrong?

http://www.my-clock.net/tmp/sreen01.jpg

alt text http://www.my-clock.net/tmp/sreen02.jpg

Answer 1

Try setting your wmode = transparent on the flash. This will keep flash from laying over top of everything no matter what z-index you set it to.

Answer 2

You could try to paste some of your CSS code at w3schools TryIt Editor to check if it is correct and z-index works as you think.

Answer 3

Remember that you need to set the wmode parameter separately for IE and other browsers:

<param name="wmode" value="opaque" /> <!-- for IE -->
<embed src="images/banner/banner.swf" quality="high" wmode="opaque" ... <!-- for other browsers-->

Answer 4

While wmode=transparent will work, it causes quite a performance hit. You'll probably get better results with wmode=opaque.

Answer 5

What if you can't change the flash modes because it's a banner from a network like AdSense?