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 F5. Except it didn’t actually work. Hmmm.

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.