need help with css selectors

Question

Hey,

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

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 2

Dear noob ;)

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 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.