Today I needed to make a drop-down menu work over a page which had flash content. I searched around a bit and quickly came up with John Oxton’s post on how to do that. So I stuck in the wmode parameter and leaned back in my chair as I tapped
To cut a long story short, after much head-banging of the frustration rather than heavy metal variety, I discovered this was due to a bug in Firefox. Basically, if you have absolutely positioned elements inside an element which has overflow: hidden, the absolutely positioned elements will not appear over the flash content, regardless of z-index. The solution is, of course, to set overflow to visible and find another way to do what you were trying to achieve with hidden.
Here is a test for this bug. I have verified that this affects Firefox on Windows and doesn’t affect IE. Flash z-index doesn’t work on Firefox/Linux whatever you do because wmode isn’t supported on that platform yet. I don’t know how Firefox/Mac is affected – if anyone wants to let me know in the comments that would be great.
Posted on Thursday, July 12, 2007.
Hi Jon,
I’ve just tested this for you on Firefox for Mac – I can confirm that setting overflow to visible will position the element on top of the flash content, with overflow:hidden causing it to drop behind the flash.
Safari 2 displays the element on top of the flash in both instances.
Mark
Wednesday 25 July
10:30 PM
Cheer Mark :) One of these days I need to get a Firefox nightly and see if it has been fixed…
Jon Leighton
Thursday 26 July
11:07 PM
I can confirm that z-index works fine on Firefox on apple mac and safri, opera
funtymemedia
Thursday 13 September
04:51 PM
Hallo Jon,
I’m working on a project with this problem – I was wondering if you found a workaround? Setting overflow:visible isn’t a realistic option for me, but perhaps you found a suitable way to replicate overflow:hidden?
thanks, Pei
Pei
Monday 22 October
10:18 AM
Wondering if you found a solution for this?I am working on Firefox and Lunix and I am not able to display popup on top of flash.
GT
Thursday 25 October
06:45 PM
This still seems to be a problem in Firefox. Does anyone know of a good work around?
Ruth
Monday 03 December
02:04 AM
On firefox/linux you juste have to display your div after swf was embed, with javascript.
s0kariss
Tuesday 01 April
01:22 PM
Very helpfull… hopefully will work for me! I’m stuck with this problem :) thanks!!!
flama
Tuesday 01 April
09:24 PM
This is fixed in Firefox 3, but they are not auto-suggesting upgrade yet, so it will be some time before the the majority are on 3. Currently I see about 1/3 of Firefox visitors using 3, which is pretty good considering it has only been GA for a few weeks. I have also seen this problem in Camino on Mac.
One less workaround to be concerned with in the near future I hope…
Tony
Monday 07 July
04:18 PM
I DENY that this works in Firefox 3 / PC… sorry. One day Firefox will fix this yes? PLLLLLLLLLLEAAAAAAAAAAASEEEEEEEEEEE for the love whatever idol you worhship – fix it now!!!
;-) Peace y’all.
MAADMAXX
Friday 01 May
06:02 AM
Is should probably clarify I’m using Firefox 3 version 3.0.1, Flash 9,0,124,0
I can’t upgrade either of these at this point – Big Cheese IT Dept reacts slowly.
If it does work for you, please provide accurate version specs so we all know when/if they fixed it?
MAADMAXX
Friday 01 May
07:30 AM
Firefox 3 version 3.0.1, Flash 10 – works fine.
Firefox and Flash Player 9 were not friends.
MAADMAXX
Friday 15 May
04:51 AM
I realize this article is nearly 2 years old, but I’m having the same problem today – 06/16/09. Drop down over Flash works fine in FF Mac, Safari, IE 7, IE 8, but does NOT work in FF Windows v.3.0.8.
Geoff
Tuesday 16 June
04:25 PM
Geoff, I’m having the same problem you are. All browsers are working except for Firefox 3 on PC. Find a fix yet? I’m even using the iFrame hack for IE 6 and 7, but it doesn’t resolve the Firefox 3 (PC) issue.
Chris
Tuesday 23 June
07:50 PM