Main Content

Fix: Flash vs CSS Drop Down Menus

If you’ve ever used CSS drop down menus and Flash on the same web page, you may have found out that Flash is always on top of the CSS. Well almost always, there is a fix!

Macromedia has a good tutorial on how to make a Flash movie with a transparent background. It’s quite easy and it allows for CSS drop down menus to drop down on top of a Flash file.

Basically all you have to do is go into the Flash publish settings, to the HTML tab and select ‘Transparent Background’ in the ‘Window Mode’ drop down. (I’m in Flash MX so newer versions of Flash may be sightly different.)

Then publish your file, including the HTML version and use the code in the HTML file when putting it into your web page. The HTML is important as there are a few new tags in the embed code.

It’s quite easy and and works well. For those who think you can just change the z-layer in CSS, well your wrong. Flash doesn’t care about z-layers and all that CSS stuff. It does what it wants. I’m just glad that Macromedia gave us a simple solution.


12 Responses

  1. IvaN says:

    Hi,

    This solution only works on Windows, I’ve tested it on IE 6,7, FF 1.5, Opera 8… but it doesn’t work on my Linux Machinese, and anyone can test it on MAC?

    Cheers

  2. Thomas says:

    It works just fine on a Mac. Haven’t tested Linux though.

  3. Sire Roydom says:

    Hey buddy, I was pulling my hair out trying to get the z-index to pop over a flash file. You saved my proverbial arse! Thanks.

    John

  4. Thomas says:

    Glad to help!

  5. Great, thanks a lot!
    And if you will visit Munich, you’ll get some beer 😉

  6. Linda says:

    I need help. I’ve tried the above approach to fix the problem with CSS drop down menus being hidden by Flash. It works for me in Firefox, but not in Explorer 6.0 or 7.0. Here is the link to the testing page: http://www.ecallis.com/MSFProof/index08-2.html. If anyone can tell me what I’m doing wrong, I’d be glad to buy them a case!

  7. You can achieve a similar result using the ‘wmode’ param – Just add:

    to your flash object.

  8. Sorry, the param code was removed in my above post – I’ll try again:

    param name=”wmode” value=”transparent”

  9. Syla_ZA says:

    Thanx bra, you made my night EAzzzzy.

  10. david says:

    I have hoped the this would work in Firefox 3 running on Linux but is no go. I cannot see my bank pages well or other sites.

    I made a hack to cure this for firefox 2 and it is still working on FF3 but asking folks to implement this is nuts. Firefox on linux will be messed up until the wmode thing is addressed by FF higerups.

    If you’d like to make webs that will reach linux correctly then here is the link to my solution.

    http://www.isayjesusis.com/css/

  11. Evan says:

    This sounds great but I also like to use swfobject which allows me to use alternate content if the user does not have a flash player, instead of just giving them an “install flash” link. can I use the two together?

    My question really is that if I do set this in my publish settings it it the javascript that set it to transparent or is it the swf itself -if it’s the latter it ought to be ok.

    Any ideas?

  12. Miguel says:

    that’s cool… But does not wotk with Google Chrome….

Leave a Reply