CSS Drop Down menu over iframe and Flash

[mike_hermary]

Hello,

I am experiencing an issue in IE (all versions) and Google Chrome (Mac and PC) with a CSS drop down menu going behind an iframe and a Flash player (video content). The iframe is pulling content from the LiveStream website and displaying it on my client’s website. The CSS drop down menu displays correctly in Firefox (Mac and PC) and Safari (Mac and PC). The problem can be viewed at this URL http://crossroadschurch.ca/index.php/sermons/live-stream.

I have read about an iframe shim that may be able to solve this problem, but as the Flash is already wrapped in an iframe I am not sure if this would provide a solution.

I have also tried messing around with position: relative and z-index: a variety of values, but nothing has worked so far.

Any help would be greatly appreciated.

Thank you.

Mike

[hardik]

for all z-index and ie issues.
just remember ie calculates z-index based on root nodes not on nodes you have given z-index.

ie

div.a>div.b>ul>li>a – this node is your menu

div.c>div.content – this node is your content with flash and all

now to sort out z-index you need to give z-index to

div.a and div.c

and value of div.a’s z-index should be greater then div.c

also you need to setup position’s relative or absolute as per your needs.

this has helped me all i hope it helps you too.

[mike_hermary]

Hello,

I am unable to change the wmode in Flash to transparent because the Flash content comes packaged in an iframe provided by LiveStream.

I have tried adjusting the z-indexes (using position: absolute or relative) on the different container DIVs, but I have been unable to get the CSS drop down menu to sit above the Flash content / iframe in IE (all versions) and Google Chrome (Mac and PC).

I might have to employ a different way of viewing the content that ‘eliminates’ the CSS drop down menu from the equation.

Thank you for your help.

Mike

[Author]

Posts