Drop down menus and Flash

by Darrell Kingsley last modified Mar 13, 2014 02:14 PM
It's the age old problem. You've got drop down navigation which works fine everywhere in Firefox and Safari, but then in Internet Explorer it suddenly starts hiding behind a Flash movie. What's going on?

This is a nightmare. You set all the z-indexes you should, even bearing in mind the ridiculous DOM that IE has, where things in different containers have different z-ordering contexts. So why does the movie cover the drop down menu?

The answer is that unless you set a particular property call wmode (twice if you're doing the object/object cross browser cludge and not using swfobject). This anchors the Flash movie on the page, so that z-ordering sticks, instead of the Flash movie floating above the page.

Here's an example of it being set. 

<object id="flashmovie-1" 
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="310" height="500">
    <param name="movie"
value="/bb_sal_map_p02_2010.swf" />
    <param name="wmode" value="opaque" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" 
    data="/bb_sal_map_p02_2010.swf" wmode="opaque" 
    width="310" height="500">
    <!--<![endif]-->
    <div>
        <h1>Alternative content</h1>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
    </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>