DHTML popup menu and Flash content Z-index issues

December 8th, 2005

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:
  1. codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
  2. <div style="z-index: 0" id="swfContainer"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> width="748" height="250">
  3. <param value="main.swf" name="movie" />
  4. <param value="high" name="quality" />
  5. <param value="transparent" name="wmode" />pluginspage="http://www.macromedia.com/go/getflashplayer"
  6. type="application/x-shockwave-flash" width="748" height="250">
  7. </object></div>

Code that is needed:

HTML:
  1. <div style="z-index: 0" id="swfContainer" />
  2. <param value="transparent" name="wmode" />

Entry Filed under: DHTML/HTML

18 Comments

  • 1. Trish  |  2006-01-17 at 2.19 pm

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

  • 2. Zillion  |  2006-04-02 at 12.05 pm

    this does not work in firefox so its useless

  • 3. Renaun Erickson  |  2006-04-02 at 12.36 pm

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

  • 4. ohad  |  2006-06-18 at 2.29 pm

    Thanks!!!!

  • 5. SmokinD  |  2006-07-18 at 10.54 pm

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

  • 6. Charles Carter  |  2006-07-19 at 9.01 am

    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!

  • 7. chuck  |  2006-07-19 at 12.22 pm

    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.

  • 8. Nagaraj  |  2006-08-02 at 11.45 pm

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

  • 9. Ethan  |  2006-11-20 at 10.20 pm

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

  • 10. Ethan  |  2006-11-20 at 10.43 pm

    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.

  • 11. Renaun Erickson  |  2006-11-20 at 10.48 pm

    glad it worked!

  • 12. Brian  |  2006-12-05 at 3.18 pm

    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!

  • 13. Sorin  |  2006-12-11 at 8.21 pm

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

  • 14. Ian  |  2006-12-17 at 4.39 pm

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

  • 15. steve  |  2007-01-02 at 5.27 pm

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

  • 16. joncl  |  2007-03-01 at 12.51 am

    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!

  • 17. Adrian  |  2007-05-01 at 2.28 am

    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???

  • 18. sam  |  2007-08-30 at 1.19 pm

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


Disclaimer: I work as a Flash/Flex Developer for Adobe Systems Incorporated. The opinions expressed here represent my own and not those of my employer.

My Amazon.com Wish List

Calendar

December 2005
S M T W T F S
« Aug   Feb »
 123
45678910
11121314151617
18192021222324
25262728293031

Most Recent Posts


Flex.org - The Directory for Flex