[RESOLVED] [B]Z-index not working on Flash object[/B]

[captsig]

Dear Colleagues,
I have a client who wants some nav menu items on top of a flash head banner that fades in several pictures. My problem is I cannot get the flash object to respond to z-indexing so that the nav menu "sits on top" of the banner so when moused over, the drop down menu items are "on top" of the flash banner; they appear "below" the banner which is useless.

I isolated as much relevant code as possible in the following basic layout:

<div id="banding">
<div id="headnav">
<ul id="nav1">
<li><a href="index.html">Home</a></li>
<li><a href="about.html" onmouseover="mopen('about')" onmouseout="mclosetime()">About Us</a>
<div id="about" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="test.html">Testimonials</a>
<a href="team.html">Our Team</a>
<a href="bus.html">Business History</a>
</div><!--end about div-->
</li>
<li><a href="contact.html" >Contact Us</a>
</ul>
</div><!--end headnav-->
<div id="flashpic">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="150" title="titlepictures">
<param name="movie" value="images/headpicture3.swf" />
<param name="quality" value="high" />
<embed src="images/headpicture3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed>
</object></div><!--end flashpic-->

</div><!--end banding-->

does anyone have any suggestions??

Thanks in advance.

captsig

[tirna]

I think z-index only works on elements that have css positioning set to a value.

But I think you might be able to get away with not having to use z-index if something like this works:

1) reverse the order of you flashpic and headnav divs in your html so that the flash object is rendered first by the browser and the headnav div afterwards which should place the nav on top of the flash object if the following css works for your html.

2) add the following to your css

 
 
#banding {
position: relative}
 
#flashpic {
position: absolute;
top: 0px;
left: 0px}
 
#headnav {
position: absolute;
top: 25%;
left: 50%}

This will hopfully place you nav 25% from the top and 50% from the left of your banding div and on top of your flash object

But all of the above is untested so fingers and toes are crossed

[captsig]

Thanks very much tirna,
I just came across a solution; googling 'using z-indexing with flash', a gentleman explained that flash doesn't really play in the browser window, but opens a new window exactly according to your position info. By adding a setting param, it forces the flash to play inside the browser and thus become subject to indexing.

The little gem of a parameter is: <param name="mode" value="opaque" /> dropping that in the list of params in the <object>tags solved the problem!!

Thanks for response.
captsig

[tirna]

no problem - I'm glad you sorted it out and thanks for letting me know

I can uncross my fingers and toes now - they were getting pretty sore