Flash image Overlapping problem in Browers - Liferay Theme

Have you faced this problem lately where you tried to add a flash file and it overlaps in IE Browser ?

When you face a browser compatibility issues, especially the overlapping of images, you use CSS property z-index for positioning the element on top of another. It could either be an <img> tag or a simple <div> tag. But using the same doesn't work when you have a flash file running. The flash images overlap any element you have in the HTML page and cannot be tackled with Z-index.

For example if when you use IE browsers or Google Chrome browser, the flash image overlaps the menu bar.

 
You can resolve this problem by using the following method

Make the following changes in your template and then make a call from the embed tag.

<param name="wmode" value="transparent">

For example :

<object >
    <param name="movie" value="$video.data"></param>
   <param name="wmode" value="transparent"></param>
   <embed  src="$video.data"  wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always">
</embed>
</object>

Now here's how it looks after following the above steps.