1

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

Improve this question
4
  • Where did you place the z-index on? Commented Jun 3, 2010 at 22:47
  • I tried it on both .header (z-index: 1) and .content text (z-index: -1). Commented Jun 3, 2010 at 22:52
  • 1
    can you post css please? Commented Jun 3, 2010 at 22:53
  • Thanks for not using flash for the navigation! Otherwise it's a real time consuming process to get the pitchfork, hunt down the perpetrator, etc. Commented Jun 3, 2010 at 22:56

3 Answers 3

Reset to default
2

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) :)

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I disagree - you can hide "object" elements on the page when a menu is selected, though I usually resort to JavaScript if I have to do this...
I also disagree. I'm working on a flex project with a lightbox-esque popup that shows up just fine above the swf (in FF, Chrome, and Safari anyways). EDIT: Just tested IE7, everything works fine.
@sdolan and @AJ, some working examples would be nice... That a topic for each I have a state of mind like "seeing is believing"... (I've really spend a "brutal" amount of hours regarding that problem and the Adobe staff told it couldn't be done...) never the less, believe me... I've tried really hard to make it work... So, working samples anyone ?
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) :)
The project I'm referring to is for a client and we're still in the "private alpha" stages, so I can't exactly give you a direct link. Though I can whip up a quick example if necessary. It looks like you've at least seen it's possible with swfobject for Matt's "specific problem". For future reference, where does this approach not work?
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!

Improve this answer

Comments

1

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.

Improve this answer

5 Comments

This will only partially fix the problem in most browsers (sadly)
Sorry I forgot that you need it on the embed tag too. I've updated the post and copied your content_text div to add the wmode paramaters both the <object> and <embed> tags. Give it another shot, and see if that works.
Ya, I added param to embed as well...still didn't work. I appreciate your help.
Ermmm. Now I'm frustrated. Can you up the z-index on the header/dropdown to like 1000, and add an opacity: 1 to the albums <ul>. Another thing to try is to switch the album's <ul> to be absolute positioned.
In the end I just added some more stuff so that the Flash app would be farther down the page and thus my drop-down could appear unaffected. Thanks y'all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.