I am back with one more hair snatching moment at work. This one was terrible, guys cant just express in words, OMG situation. Was all going mad for a right solution. Finally got a solution looking all over the internet. So just at the end of the day feels like sharing with all of you people.

Situation: Your website, takes a drop down menu, say a javascript drop down type and also has a banner on the top that just follows the menu on its top. The stage is set well for the real trouble 🙂

Issue: Now as i get my mouse over the drop down, i get in the issue of my drop down getting below the flash banner. Initially as any ordinary developer on web, my first thought was- this is just some patching with z-index. So lets play with the CSS.

I was trying an hour and then two, oh goodness no result, tried all that i can with the positions and the z-index. Did not fetch me the result. So opted for the true companion GOOGLE. After a lot of breaking and banging of head, it was all a matter of two lines that can help me out of this. It was just as in the below example,

All i had my Flash object code as –

<div id=”flash_container”>

<!– START OF flash EMBEDDING TO COPY-PASTE –>

<object id=”player” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ name=”player” width=”800″ height=”375″>

<param name=”movie” value=”player.swf” />

<param name=”allowfullscreen” value=”true” />

<param name=”allowscriptaccess” value=”always” />

<param name=”flashvars” value=”file=video.mp4&image=preview.jpg” />

<embed  type=”application/x-shockwave-flash” id=”player2″ name=”player2″ src=”player.swf”  width=”800″  height=”375″ allowscriptaccess=”always”  allowfullscreen=”true” flashvars=”file=video.mp4&image=preview.jpg”

/>

</object>

<!– END OF THE flash EMBEDDING –>

</div>

So wondering if i could get all the problems fixed with just having the flash player down by z index and the menu script above it by z-index valu. So i did,

#jwplayer_container{  position: relative;  z-index: 0;}
#main_menu_list{  position: relative;  z-index: 1;}

but did not really worked out, was not the solution to my issue.


With all the effort and time spent, finally got the solution. Was a matter of kust adding a parameter to my flash object. We just had to add the parameter named “wmode”, this describes about having our flash object to be with a transparent object type, so what really i have to do was add this bit of code,

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

and then assign it the value,

wmode=”transparent”

And that worked out and the menu got awesome,

the solution clicked on to all the browser. Hope this was a useful post to all to learn and explore. Thank you 🙂

%d bloggers like this: