I have a Flash component that is nested in multiple div's: div1->div2->flashHolder->flashContent. I also have a jQuery modal dialog popup box that warns of upcoming session timeout. Previously, Firefox showed this popup over top of the Flash (correct) while all other browsers hid the popup behind the Flash. To fix this, I added wmode="transparent" to the <object> tags as well as the swfobject.embed() method. This fixed the problem in IE, Chrome and Safari. However, in Firefox, the flashHolder/flashContent div's are now hidden behind div2. I tried setting the z-index of the div's but no luck. So how can I get the Flash component to show with the jQuery dialog box on top in every major browser ?
EDIT: Could not get my Flash object to load in Firefox 4/5 with wmode=transparent or wmode=opaque. It just wouldn't load at all. I think this page describes the problem, but I decided to fix the problem with a simple javascript hack:
if (navigator.userAgent.indexOf("Firefox")==-1)
params.wmode = "transparent";
I know that's looked down upon, but oh well, it works.
