PDA

View Full Version : Navigation Bar drop downs hiding under flash objects


deafboyzaudio
12-19-2010, 07:58 AM
First off, greeting to everyone again, sorry i have been distant i have been working very hard on my site, but i am on track to launch before CES in january.... so its paid off...:mrgreen:

feel free to take a look at my link below (still under construction though )

i was hoping i could get a lil help on someting that i cant figure out..

I have made a spry navigation menu using CS4 and it works great, except in IE8, opera 11 and safari the drop down menus "hide" under my flash videos and under my watched now banner.


In firefox it works great.

you can see an example at

http://www.deafboyzaudio.com/videos/latest
i tried changing the z index of the containing element of the flash banner to a z index of 1 but that didnt work. the z index of the nav bar is 1000

i dont know css well enough to know if some technical clause is making it not function as intended.

can someone take a look?

here is my spry menu bar css... generated by dw, a made a few mods but dont think anything with z index, as least not on purpose...:mrgreen:
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
font: 14px Tahoma, Geneva, sans-serif;
cursor: default;
width: 100%;
}

/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 105px;
float: left;
}



/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 105px;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 105px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #BBB;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #666;
padding: 7px 15px;
color: #333;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #BBB;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #BBB;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus,
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #369;
color: #D7D7D7;
}


/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/************************************************** *****************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
and here is the style for the containing div of my flash watched now banner:

#watching{
z-index:1;
}

.flash{
z-index:1;
}
the .flash is the embed id of the flash xml as you can see if you use firebug to see the layout/css

hope that is enough info, lemme know if you need anymore.

THANKS in advance for any help!!!!

gentleone
12-19-2010, 09:00 AM
Add this to your SWFObject and lets see what happens

so.addVariable("wmode", "transparent");

deafboyzaudio
12-19-2010, 04:04 PM
ok i added what you wanted, now the flash vars look like:
<script type="text/javascript">
var so = new SWFObject("'.$path.'templates/'.$site_template.'/watchedNow.swf", "flash", "670", "150", "8", "#'.$bgcolor.'");
so.addParam("allowFullScreen","true");
so.addVariable("wmode", "transparent");
so.addVariable("width", "670");
so.addVariable("height", "150");
so.addVariable("flashvars", "title='.$background_text.'&rotationTime=6&xmlfile='.$path.'data/watchednow/widget.xml");
so.addVariable("pluginspage", "http://www.macromedia.com/go/getflashplayer");
so.addVariable("play", "true");
so.addVariable("title", "'.$background_text.'");
so.addVariable("rotationTime", "6");
so.addVariable("xmlfile", "'.$path.'data/watchednow/widget.xml");
so.addVariable("autoplay", "true");
so.addVariable("movie", "'.$path.'templates/'.$site_template.'/watchedNow");
so.addVariable("scale", "showall");
so.addVariable("quality", "high");
so.addVariable("src", "watchedNow");
so.addVariable("menu", "true");
so.addVariable("allowFullScreen", "false");
so.addVariable("allowScriptAccess", "sameDomain");
so.addVariable("salign", "");
so.addVariable("codebase", "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0");
so.write("watching"); // "write" the new flash
</script>' ;
cleared all the history, closed the browser and still hiding in ie and safari, didnt check opera.

gentleone
12-19-2010, 06:38 PM
Sorry... should be addParam.

so.addParam("wmode", "transparent");

deafboyzaudio
12-22-2010, 02:02 PM
hey sorry it took me so long to respond, ive been real busy with my regular job.

I tried that out and yes it did work, it made a background on the watched now flash totally dissapear but i did a little research on that add.param and figured out that "opaque" worked out just how i needed it!

thats a big relief to get that fixed... 60% of people out there couldnt navigate my site without the nav bar, thanks!