Grow your CSS skills. Land your dream job.

SWF Flash Hiding/Covering CSS Drop Down Menu

  • # July 27, 2009 at 1:06 pm

    Hi all, I have googled this for hours and searched these forums and all the solutions I’ve found have not worked. Okay, my problem is that my drop down menu is covered by my flash file on my homepage of my test site http://www.bindmybible.com. If you hover over the "About Us" page the menu is obscured and covered by the flash movie on the home page. I have tried z indexes, absolute positioning, etc. Also, this site is built in wordpress so there are several style sheets that control the site.

    Tips? Ideas?

    # July 27, 2009 at 1:28 pm

    Great, soon as I post this asking for help I found a solution.

    Anyone else with this issue here is the code I used. By the way, I am using it on a wordpress install so I just inserted the code in a text widget. Here’s what you need to stop a drop down from being hidden by a swf or other flash file. Also, I did change the z-indexes of the menu div as well as the div containing the flash file. It goes without saying that I gave the menu dive a higher z-index value than the div containing the flash file.

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0&quot; width="910" height="357" title="Intro">
    <param name="movie" value="YOUR FILE HERE" />
    <param name="wmode" value="opaque">
    <param name="quality" value="high" />
    <embed src="YOUR FILE HERE" quality="high" wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer&quot; type="application/x-shockwave-flash" width="910" height="357">
    </embed>
    </object>

    # July 27, 2009 at 1:38 pm

    I guess your problem must be in ie because it works ok in my browser.
    Try this:

    Code:
    #menubar {
    height:60px;
    margin:0 40px 0 35px;
    position:absolute;
    top:125px;
    width:915px;
    z-index: 2;
    }

    #sidebar-box {
    clear:both;
    float:left;
    margin:-10px 0 0 -5px;
    position:relative;
    width:910px;
    z-index:1;

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".