Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.

Flash content and z-index

Wednesday December 1, 2004

Just to set up the scene, a project I am working on requires a Flash navigation set. To tackle the obvious accessibility issues, I have created a run of the mill XHTML list of links that mirrors the Flash version exactly and hidden it from visual browsers using CSS. This is all fine. I have placed the Flash navigation set at the very bottom of the XHTML and positioned it back to the top of the page using CSS, so no major problems there.

The problem really starts when I realise that the Flash content is overlapping two other elements of the page, namely a site wide search form and a logo which doubles as a link back to the home page and, as you would expect, due to it's position within the page structure it is on the top of this 'stack' meaning I can't use the search form and I can't see the logo,let alone click it.

Flash stacked by default

These three elements, for the sake of simplicity, are each contained within a uniquely identified div tag and are positioned absolutely. The obvious answer is to use z-index to move the two divs above the Flash content but (insert Eddie Izzard accent here) it does not work! The reason, as explained by Macromedia

A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order ("z-index") of those layers.

That's all a little bit upsetting I must say. Luckily, the same tech note from Macromedia goes on to explain how you can use the wmode tag to create a transparent background for your Flash content, thus allowing the layers underneath to show through. Support for this method is now pretty widespread for newer browsers (CHECK THIS TECH NOTE FOR BROWSER SUPPORT DETAILS!). I am not overly worried about older browsers because, chances are, I am going to serve up a simplified version for Netscape 4 and his buddies anyway and, as I am using Flash MX specific ActionScript to deliver the content, the user will have to have Player 6 to see the content, so no worries about older versions of the player; such are the decisions you have to make when working with Flash!

Okay, so using Drew's Flash Satay method my code for the Flash content looks something like this

  1. <object
    type="application/x-shockwave-flash" data="/flash/navbar.swf"
    width="750" height="90">
  2. <param name="movie" value="/flash/navbar.swf" />
  3. <param name="wmode" value="transparent">
  4. </object>

Line three is the key to the whole thing and adding this, as said, I can now see my logo and my search form, I still can't get to them to use them though!

Flash with transparent background applied

This is where the tech note got a bit fuzzy for me and the reason I am making this post; it says

Newer browsers add the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash content.

This, to me at least, suggests that I shouldn't have run into the problems I did when using a newer browser, such as Firefox or Internet Explorer 6 (Update: Reading this back maybe the DHTML bit should have been a clue as to why I hit problems, I don't have the D bit!). The z-indexing should have worked straight out of the box but it didn't.

So, as I understand it thus far, I would say that, for the moment at least, you must include the wmode tag if you want the ability to 'layer' the flash content using CSS alone.

With this done and the appropriate CSS in place (e.g. #id{position:absolute; z-index:1;}. My search form, flash navigation and logo are all nestling happily together at the top of the page and I can go and have a nice glass of wine! hooray!

Flash stacked with transparent background and z-indexing

Update

Veerle has done some expirmentation on this subject, take a look

  1. Matthew

    1896 days ago

    Wine well earned, I think.

    If I never design with Flash again, I’ll be a happy camper. I experimented with it some in the last version of my Splendid site and decided to run away (run like hell) when I did the redesign. It just gave me headaches.

    Now I’m happily Flash free.

  2. Jared

    1896 days ago

    Flash can be a cruel mistress, that’s all I can say. Well done!

  3. Shawn

    1896 days ago

    Congrats on working that out. Enjoy your wine!

  4. Derek Featherstone

    1896 days ago

    Will we actually get to see a working example at all different stages? It isn’t that I don’t like your graphical representations of them, but I find it much more useful to actually see the problems and solutions in action…

  5. John Oxton

    1896 days ago

    You are absolutley right Derek. I do have a poilcy, no clients get mentioned on this site (due to the high quantity of rubbish/abusive content) and this is the reason I have not provided any working examples from the project at the moment. That and lack of time – there is wine to be drunk after all! :-)

    But yes, it is a good idea and I will try and do a sample set when I get a moment.

  6. Jon Hicks

    1895 days ago

    Could the clickable logo not been repeated as part of the flash movie? And nudged down so that it doesn’t overlap the search form?

    Basically, as always with web technology, anytime you want do something a little ‘different’, it vomits back in your face and tells you can, but you have to pass the seven trials before you get there.

    Well done for passing the trials BTW!

  7. Tore Mogensen

    1895 days ago

    I tried using this technique for having Flash content beneath the suckerfish dropdowns. But in Safari the dropdowns get semi-transparent on :hover allowing you to see the flash film underneath.

  8. John Oxton

    1895 days ago

    Yup… Safari does not fully support the method, if at all. It is not listed on the Macromedia support info. Here’s hoping one day aye!

  9. ColdForged

    1895 days ago

    Oy. CSS gets tricky enough with ridiculous browser dependencies, I can’t see how anyone can keep it straight with Flash thrown into the mix. Kudos.

  10. AkaXakA

    1894 days ago

    Yeah. Flash sure is a handfull if you decide to mix it with any fancy css.

    It’s apparently the most asked question on the macromedia site too ;)

    PS. My Gravatar, being a transparent png, looks funky in non-ie browsers as you can still see your own site-wide gravatar behind it.

  11. Ed Merritt

    1889 days ago

    Perfect timing, I hadn’t had to worry about this before and then lo and behold, I get a job through today asking if this is possible.

    Very handy, cheers.

  12. Web design in Devon, UK

    1887 days ago

    I’m getting that Safari problem too. has anyone found a fix?

    have a look at the code on my website it’s Bobby AAA and W3C aproved WITH flash contant! (hehehe) the Flash works on all browsers apart from Safari. the script should only show one of the two flash banners depending on the browser but Safari shows both, aaaaaagh.

    Has any one found a solution to this web design problem?

  13. Web design in Devon, UK

    1887 days ago

    Forgot to add… Can someone kindly test it in Explorer 5.5 win for me?... it’s the only browser I haven’t tried yet

    Cheers

    http://www.vitalized.co.uk

  14. Ed Merritt

    1881 days ago

    Works like a charm in IE 5 and IE 5.5, but Opera 7.54 doesn’t seem to like it.

  15. Web site design in Exeter, UK

    1879 days ago

    I think I may have solved the problem I written a small article about how to fix it have a look at http://www.vitalized.co.uk/news-resources/web_mac_news.asp

    It works on all browsers (even Safari)

    Anyone can publish the article on their website/blog but please credit me and put a link to my website with the article… http://www.vitalized.co.uk

    Hope it helps you.

    Simon Brown

  16. Manish Khanal

    1469 days ago

    To manage the javascript menu above flash movie just adding
    param: wmode=transparent
    doesnot not work in Mozilla Firefox. Add

    WMODE=”transparent”

    inside embed tag also

    I have managed this at http://www.equatorexpeditions.com/


Christmas gifts?

Beginning CSS Web Development book cover

Recently

The last seven posts made on this site.

Geeky shiteMeta

A proud member