DHTML popup menu and Flash content Z-index issues

Posted on December 8, 2005 | 18 comments

We had a problem with a DHTML popup menu being rendered behind any flash content.

To fix the problem you need to use some Flash object tag settings and some div z-index configurations.

[html] codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″

width=”748″ height=”250″>pluginspage=”http://www.macromedia.com/go/getflashplayer”
type=”application/x-shockwave-flash” width=”748″ height=”250″>

[/html]Code that is needed:
[html]

[/html]

Share the post "DHTML popup menu and Flash content Z-index issues"

  • Trish

    THANK YOU!!! I’ve been fighting with this problem & screwing around with z-index configs for what seems like forever!

  • Zillion

    this does not work in firefox so its useless

  • http://www.renaun.com Renaun Erickson

    It does work on Firefox. The containing the DHTML popup needs a z-index greater then 0.

  • ohad

    Thanks!!!!

  • SmokinD

    Just had to say thank you! This was a great help.

  • Charles Carter

    Check out this site: http://d14684333.r200.radiowebworks.com/

    It works on my local in Firefox, but on the server the menu is STILL behind the Flash.

    Also, in Internet Explorer, how can I get rid of the Box around the flash content WITHOUT disabling my DHTML menu?

    Email me back at: chuck@triplefm.com

    Thanks for the help!

  • chuck

    I don’t know what happened to my post, but it does NOT work in Firefox. I made the changes, and although it worked on my local. The changes did NOT work on Firefox. Look at the site in Firefox:

    http://d14684333.r200.radiowebworks.com/

    It does not work! Also, does anyone know how to get rid of the box around the flash WITHOUT getting rid of the DHTML in Internet Explorer.

    Thanks for the help. Please do not delete this post.

  • http://www.creativewebwise.com Nagaraj

    thanks , I’ve been facing with this problem with z-index configs for what seems like forever!

  • Ethan

    It did not work for me in firefox, either. Does anyone know of a solution that works?

  • Ethan

    ok.. delete the above comment. it works in firefox. there are so many flash objects on the page, i got confused and was adding the params to the wrong one :) thanks.

  • http://www.renaun.com Renaun Erickson

    glad it worked!

  • http://zollinhofer.com Brian

    Would some kind soul help me get this working on my site? I’m useless when it comes to flash, but it has a nice look on my page at the moment. I’m about to add another part to my menu which will run over onto the flash, so I need to get this issue fixed. The site I’m working on is http://64.21.158.147. If you have a moment or two to help me out, I’d appreciate it. brian [dot] zollinhofer [at] gmail

    Thanks!

  • http://www.sgallery.net/ Sorin

    Thank you very much! Problem is fixed on my page (flash logo and pop-up image on layer) http://www.fame.md/info/projects/

  • Ian

    This fixes the firefox problem on windows but not on linux.

  • steve

    don’t forget to add the wmode property to the embed tag to make this work for Firefox. wmode=”transparent”

  • joncl

    Note, if you copy and paste wmode=”transparent” from Steves post above, it doesn’t work (at least not for me). Re-typing the double quotes did the trick though. Thanks!

  • http://www.grasshopper.uk.com Adrian

    I would like to use this technique on our site. We have a popup tag box which displays when the user clicks to type something in the search box, but with the flash content on our site, particularly on the home page, the flash goes ontop of our popup DHTML tag box.

    This technique however seems to break down on Safari. The animation still flashes sometimes on top of the DHTML box. Seemingly a refresh rate problem???

  • sam

    Is there a fix for safari on the mac? I am having problem finding a solution for safari. Any help will be greatly appreciated.