Pull-down menu problem

[mlibkind]

I have a pull-down menu bar at the top of my website. Below it on the page was a jpg that was placed with the following code:

<div class="right"><img src="../../assets/maps/map_1011_final.jpg" alt="Map for tour" /></div>

The class="right" contains:

div.right
{
position:absolute;
top:147px;
left:348px;
height:555px;
width:552px;
margin:0px 10px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#FFFFFF;
overflow:auto;
z-index:2;
}

This works perfect. The pull-down menu comes down and is on top of the image so that I can see all the links in the menu.

I changed the jpg to an swf file which was created using FlashPaper. The new code is:

<div class="right"><embed src="../../assets/maps/map_1011_final.swf" width="552" height="555" alt="Map for tour" ></embed></div>

The flash file (it's a map) displays correctly. However, the pull-down menu is always behind the map and I can't figure out what to do to correct that. One of the things I did was inserted "z-index:10;" in the css for the pull-down menu related entries. This did not help.

Is this an issue related to how a flash image is displayed? If so, is there a way to fix the problem. I want to use the flash image because it allows the viewer to zoom in and out as well as drag the map.

I'm a relatively new programer and would appreciate a little hand-holding in your response.

As always, I really appreciate the help you provide.

Thanks.

Marcus

[Fang]

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523

[mlibkind]

Fang,

Thank you very, very much for your help. It was trivial to fix the problem after reading the article you sent me to.

Cheers.

Marcus