10 replies [Last post]
paulferree
Offline
newbie
Oklahoma
Last seen: 10 years 34 weeks ago
Oklahoma
Joined: 2008-02-27
Posts: 9
Points: 0

I have a menu with drop downs that work using css (divs, uls, and lis) to display the menu items.

Right below the menu I have a flash movie playing. For some reason when the menu drops down it displays BEHIND the flash movie instead of on top of it like it would if it were a picture. I tried to do some Z-Indexing, but it didn't work at all, although I could've done it incorrectly...anybody ever have the same problem and any ideas as to how to correct it?

Thanks in advance for your time.

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 7 years 11 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

Some html, and css, and

Some html, and css, and perhaps a link would certainly narrow this down some...

mattrossidesigns.com

jiveturkey
Offline
newbie
UK
Last seen: 10 years 41 weeks ago
UK
Joined: 2008-02-27
Posts: 5
Points: 0

I think the simple fix for

I think the simple fix for this is to set the vmode of the flash to be transparent

bgcolor="#ffffff" quality="high" wmode="transparent" height="133" width="487"

Jason

paulferree
Offline
newbie
Oklahoma
Last seen: 10 years 34 weeks ago
Oklahoma
Joined: 2008-02-27
Posts: 9
Points: 0

A sampling of the menu looks

A sampling of the menu looks like this:


  • Diabetes & Your Skin 




The flash is displayed in a table cell, wrapped in a DIV:

The styling for the menu is:

#p7PMnav {
margin: 0;
padding:0;
}
#p7PMnav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#p7PMnav ul {
margin: 0;
margin-top: 5px;
padding: 0;
/* background-color: #000000;
border: 1px solid #000000;*/
position: absolute;
left: -9000px;
z-index: 10000;
}
#p7PMnav a {
display: block;
text-decoration: none;
/*padding: 4px 10px; */
color: #000000;
line-height:1;
}
#p7PMnav a:hover, #p7PMnav a:active, #p7PMnav a:focus {
/*background-color: #0066FF;*/
color: #ffffff;
letter-spacing: .01px;
}

/* ------ the current page marker style ------ */
#p7PMnav .p7PMmark {
color: #333333;
font-weight: bold;
}
/* ------ the trigger link styles ------- */

/*the trigger link */
#p7PMnav ul .p7PMtrg, #p7PMnav ul .p7PMon {
/*background-image: url(img/p7PM_dark_east.gif);
background-repeat: no-repeat;
background-position: right center;*/
}
/* the active trigger link style */
#p7PMnav .p7PMon {
background-color: #0066FF;
color: #FFFFFF;
}
/*the submenu classes */

#p7PMnav .p7PMhide {
left: -9000px;
}
#p7PMnav .p7PMshow {
left: auto;
z-index: 20000 !important;
}
/* Top level menu width */
#p7PMnav li {
float: left;
/*width: 124px;*/
}
#p7PMnav ul li {
float: none;
}

ul#p7PM_drop_down{
padding-left: 4px;
}

#drop_down_container {
border: 1px solid #000000;
background-color: #F0F0F0;
margin-left: 10px;
/*padding-top: 3px;
padding-bottom: 3px; */
margin-top:5px;
width:130px;

}

#drop_down_container a:link, #drop_down_container a:visited {
color: #000000;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#drop_down_container a:hover, #drop_down_container a:active {
color: #0088A3;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#drop_down_container li {
border-top: 1px solid #000000;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
height: 18px;
clear: both;
width:120px;
}

#drop_down_item {
border-top: 1px solid #000000;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
height: 18px;
clear: both;
width:130px;
}

jiveturkey
Offline
newbie
UK
Last seen: 10 years 41 weeks ago
UK
Joined: 2008-02-27
Posts: 5
Points: 0

http://www.glassesdirect.co.u

http://www.glassesdirect.co.uk/release_000/

The flash at the top of the page sits above the drop down using the method I mentioned above

Jason

paulferree
Offline
newbie
Oklahoma
Last seen: 10 years 34 weeks ago
Oklahoma
Joined: 2008-02-27
Posts: 9
Points: 0

Works like a charm!!! What

Works like a charm!!!

What is vmode? Why did it work?

Thanks!!

lukesneeringer
Offline
newbie
Austin, TX
Last seen: 10 years 29 weeks ago
Austin, TX
Timezone: GMT-6
Joined: 2008-04-01
Posts: 2
Points: 0

jiveturkey wrote:I think the

jiveturkey wrote:
I think the simple fix for this is to set the vmode of the flash to be transparent

bgcolor="#ffffff" quality="high" wmode="transparent" height="133" width="487"

Jason

Hi there!

I'm having the same issue, except wmode="transparent"...doesn't seem to fix it. I don't understand why.

Site is www.kitegang.org.

If anyone here has any wisdom, I'd sure appreciate it.

esnsone
esnsone's picture
Offline
newbie
Chicago
Last seen: 10 years 29 weeks ago
Chicago
Timezone: GMT-5
Joined: 2008-05-20
Posts: 2
Points: 0

CSS Menus on top of Flash Elements

You need to add two key tags to your code in order for your CSS menus to be on top of your Flash media. You follow this there should be no problem.


param name="movie" value="xxx.swf" />
param name="quality" value="high" />
param name="wmode" value="transparent" />

embed src="xxx.swf" width="xxx" height="xxx" hspace="0" vspace="0" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"

esnsone
esnsone's picture
Offline
newbie
Chicago
Last seen: 10 years 29 weeks ago
Chicago
Timezone: GMT-5
Joined: 2008-05-20
Posts: 2
Points: 0

Let me know how things go

Let me know how things go btw.

lukesneeringer
Offline
newbie
Austin, TX
Last seen: 10 years 29 weeks ago
Austin, TX
Timezone: GMT-6
Joined: 2008-04-01
Posts: 2
Points: 0

I already have that there.

I already have that there. It still is behind the Flash in IE7.

alsparber
Offline
newbie
Last seen: 9 years 47 weeks ago
Joined: 2009-01-17
Posts: 1
Points: 0

Drop down menu is displaying behind flash movie...why?

Our Knowledge Base has your solution:
http://www.projectseven.com/support/answers.asp?id=127