need help with css selectors - css

Question

I have a menu like so:
<div class="header">
<ul class="nav">
<li><a class="home" href="four80eastfan_home.php"><img src="Images/home_button.png"></a></li>
<li><a class="albums"><img src="Images/albums_button.png"></a>
<ul>
<li><a class="Album" href="four80eastfan_thealbum.php"><img src="Images/the_album.png"></a></li>
<li><a class="Nocturnal" href="#"><img src="Images/nocturnal.png"></a></li>
<li><a class="Round3" href="four80eastfan_round3.php"><img src="Images/round3.png"></a></li>
<li><a class="EnRoute" href="#"><img src="Images/en_route.png"></a></li>
<li><a class="RollOn" href="#"><img src="Images/roll_on.png"></a></li>
</ul>
</li>
<li><a class="band"><img src="Images/band_button.png"></a></li>
<li><a class="members"><img src="Images/members_button.png"></a></li>
</ul>
And when I hover over the "Albums" part, the drop-down menu is covered by the content beneath it, which is this:
<div class="content_text">
<object width="100%" height="100%">
<param name="movie" value="web/simpleviewer.swf"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="bgcolor" value="ffffff"></param>
<embed src="web/simpleviewer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%" bgcolor="ffffff"></embed>
</object>
</div>
relevant CSS:
.content_text{
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
margin-top: 5%;
background-color: #fff;
border: solid 5px;
z-index: -1;
position: relative;
}
.header{
background-color: #000;
position: relative;
z-index: 1;
}
I've been trying different things with the z-index property to make the drop-down appear above this content, to no avail. Could it be the flash app that's causing the problem? Please help a noob out.
Cheers,
Matt

Answer 1

There's no way you can place html elements over flash... sorry :)
Had that problem, I've tried all scripts and code snippets or "custom made" solutions, I finally, I've read the flash specs # Adobe, where there techs specifically say that can't be done :)
EDITED:
Well, seems like sdolan and AJ where "more or less" right, using the:
code.google.com/p/swfobject code to embed flash, there is a parameter for it:
so.addParam("wmode", "opaque");
that makes what Matt want possible... (specific code, for specific problem) :)

Answer 2

I assume you're using MSIE as your target browser? By default, embedded items will appear above all other items (this is a pretty common annoyance). One option is to hide the offending elements - or just don't use them!

Answer 3

I believe this is a problem with Flash's window mode always being on top of everything. No amount of z-indexing is going to fix this. If I remember correctly, adding the following code should fix it (though it's been a long time since I dealt with this.)
<div class="content_text">
<object width="100%" height="100%">
<param name="movie" value="web/simpleviewer.swf"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="bgcolor" value="ffffff"></param>
<param name="wmode" value="transparent"></param>
<embed src="web/simpleviewer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%" bgcolor="ffffff" wmode="transparent"></embed>
</object>
</div>
Mostly a shot in the dark, so I apologize if it doesn't work.