Anyone who’s had anything to do with web design, knows what a lightbox is, or at least has clicked on their fair share of them. For any web designer lucky enough to experience a YouTube video or Flash video overlapping their oh-so-beautiful lightbox, or their lovely css/javascript dropdown menu, will know that its one of those… you guessed it, Internet Explorer annoyances (in this case IE7).
With the move from Internet Explorer 7, we were finally able to use PNG graphics (at least without having to add an IF IE7 condition statement to our head markup); however, when using flash, you’ll notice it renders as the upper most element, overlapping anything that dares try to be on top. The fix? Well its actually quite simple.
Here is an example object/embed element.
<object width="450" height="300" data="http://www.somedomain.com/video.mov"> <param name="movie" value="http://www.somedomain.com/video.mov"></param> <param name="wmode" value="transparent"></param> </object>
To prevent Flash from overlapping other elements, we simply need to remove ‘Line 3′.
<param name="wmode" value="transparent"></param>
For those that use sIFR to render standard text as flash, you’ll need to change the “sWmode” from transparent to opaque as is the case in the following line:
sIFR.replaceElement(named({sSelector:"h2#phrase", sFlashSrc:"/assets/typography/walbaum.swf", sColor:"#FFFFFF", sLinkColor:"#FFFFFF", sBgColor:"#000000", sHoverColor:"#CCCCCC", sWmode:"opaque", nPaddingTop:1, nPaddingRight:10, sFlashVars:"textalign=right&offsetTop=0"}));
Once your done changing your markup, Flash elements will FINALLY play nicely with the rest of your site. 