Solution to problem of Flash overlapping CSS Menus or JavaScript popup

I recently designed a site where I had Javascript popups /CSS menu side by side with some Flash content. Unfortunately, when ever the Javascript or CSS popup was activated, the Flash content was overlapping  the former.  The solution to this problem lies in lowering the z-index value of the CSS or Javascript.

A more useful  method I found, is to insert the value wmode="transparent" in the Flash <embed> tag as follows :

<embed quality="high" wmode="transparent"
     allowscriptaccess="always" align="middle"
     type="application/x-shockwave-flash" ...>
...
</embed>

I found inserting this value to do the trick and the CSS or Javascript popup is no longer hindered by the adjacent Flash content on the same page. This solution works on most recent major web browsers such as IE 8, Firefox 3, Safari 4, Opera 9 and so on. I haven’t checked if it works on older web browsers though.

0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Related posts: