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.
