Flash Objects Displaying on Top of HTML Content

del.icio.us Digg Reddit StumbleUpon Technorati

Posted on July 4th, 2007 .

Comments

Comments

I have experienced a problem recently when designing a website; the flash banner was displaying on top of the CSS menu regardless of the stacking order (”z-index”).

By default, browsers place embedded content, on the top layer. In older browsers, you can’t place a DHTML layer on top of a Flash layer. Newer browsers have the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash.

The parameter WMODE

The solution for this problem is using the parameter WMODE to allow layering of Flash content with DHTML layers. The parameter WMODE has 3 possible settings: ‘window’ (default), ‘transparent’, or ‘opaque’. Setting WMODE to ‘transparent’ or ‘opaque’ will prevent the Flash object from playing in the top layer and allow you to adjust the stacking order of the movie within other layers of the HTML document.

Just add this parameter:

<param name="wmode" value="transparent" />

And this value to the embed attribute:

wmode="transparent"

This should resolve the problem. :-)

Tino Triste

Popularity: 16%

Listen to this podcast Listen to this podcast

What I´m listening to: Leonard Cohen - I'm Your Man


This Post Was Brought To You By:

Related Posts

CSS: Automatically Marked and Accessible External Links
Common Web Design Mistakes
Cute RSS Icons for Your Blog
101 Free Web Resources That Will Make You a Successful Webmaster
TheFontThing - font management tool for browsing your fonts




Comments to “Flash Objects Displaying on Top of HTML Content”

  1. Sharon Says:

    So that’s how it’s done. I had the same problem when I designed a website sometime ago with flash content. I decided to scrap the idea after I couldn’t figure out how to make it work properly.

  2. Sharon Says:

    So that's how it's done. I had the same problem when I designed a website sometime ago with flash content. I decided to scrap the idea after I couldn't figure out how to make it work properly.

  3. Tino Says:

    So here you go, you’ve got a solution for it now. :-)

  4. Tino Says:

    So here you go, you've got a solution for it now. :-)

  5. Corrado Says:

    Just happened to Stumble upon this. Thanks a lot! Now I can move on with my site design. :)

  6. Tino Says:

    You’re welcome Corrado. ;-)

  7. Corrado Says:

    Just happened to Stumble upon this. Thanks a lot! Now I can move on with my site design. :)

  8. Tino Says:

    You're welcome Corrado. ;-)

  9. Ray Says:

    Any idea how to get it viceversa? I have a site wherein the flash menu is overlapped by an html jump menu. When the flash menu expands, the menu goes behind the HTML jump menu. Wondering how to get this resolved. Thanks for the help in advance.
    regards
    Ray K

  10. Ray Says:

    Any idea how to get it viceversa? I have a site wherein the flash menu is overlapped by an html jump menu. When the flash menu expands, the menu goes behind the HTML jump menu. Wondering how to get this resolved. Thanks for the help in advance.
    regards
    Ray K

  11. Tino Says:

    Yes I can have a look for you. Can I have the URL please?

  12. Tino Says:

    Yes I can have a look for you. Can I have the URL please?

  13. Mason Says:

    This doesn’t work on LINUX, you have to position in iframe between the two layers if you want it to work there, and even then it only fixes some of the LINUX browsers.

  14. Mason Says:

    Sorry, meant to say ‘position an iframe’, not ‘position in iframe’. Oh, forgot to mention, iframe has to start as display: none and then have script change it to display: block.
    http://blog.marcoos.com/2006/07/21/html-div-above-a-flash-animation-on-linux-its-possible/

  15. Mason Says:

    This doesn't work on LINUX, you have to position in iframe between the two layers if you want it to work there, and even then it only fixes some of the LINUX browsers.

  16. Mason Says:

    Sorry, meant to say 'position an iframe', not 'position in iframe'. Oh, forgot to mention, iframe has to start as display: none and then have script change it to display: block.
    http://blog.marcoos.com/2006/07/21/html-div-abo…

  17. Tino Says:

    I see Mason, yes it might work differently on a Linux Machine. It might work for Gecko browsers only.

  18. Tino Says:

    I see Mason, yes it might work differently on a Linux Machine. It might work for Gecko browsers only.

  19. Hale Mauricio Says:

    oh we didn’t care,we made it very clea. Hale Mauricio.

  20. Hale Mauricio Says:

    oh we didn't care,we made it very clea. Hale Mauricio.

  21. Marius Says:

    HI,
    fluit design with flash and layers, but I still not be able to make the wmode with the css div layers.

    If anyone can guide me to fix this problem will be great. The URL is up at http:geospatialdynamics.com

    Marius

  22. Mike Says:

    This does not work anymore.

  23. Mostafa Says:

    Hi dear!
    I'm very very surprised! I created an AJAX box menu and my flash was over it. Your details solved my problem.
    Thank you!

  24. Custom Flash Banner Says:

    Hi, I really like your site, nice posts! I would like to give you a free flash banner for you to advertise in other blogs/sites if you need one of course. Anyways great blog! Thanks

  25. Hery Says:

    Great post.. your solution works.. I apply it on my websites..
    I was searching for long time to find solution fot this flash position issues,
    And end here..
    Thank you..!!

    ——————-
    Hery

  26. home plans Says:

    hi this is a nice post but all about of this topic I do not properly understand. so please descried it.

Leave a Reply

my del.icio.us my Digg  my Facebook