spry menu not showing up behind flash

[tkarpitskiy]

i posted in general, so sorry about the double post. i think this problem may be solved with some html but i dont know...

okay so i have this horizontal spry menu that is being covered up by a flash movie. well the main menu shows but when i go over a specific menu item to show sub items, it show but you can tell its under the flash movie. i would upload the site but i dont have server space for it now. any idea on how to bring the menu forward or send the flash back?

[abduraooft]

Have a try by applying a 'param' to your flash object like
<param name="wmode" value="transparent" />

[redwolf1430]

THANK YOU THANK YOU!! this solved my problem.. I have been hunting for a solution for weeks now.. You have ended my quest and for that I say thank you

[redwolf1430]

spoke too soon.. Fixed it on google chrome but not ie or firefox. Its a good hint thanks.:thumbsup:

[redwolf1430]

Fixed for IE and Chrome firefox still hiding spry menu under my flash file..

But 2 out of 3 browsers is a good start.. It seems that adding a width for your spry menu and the addition of the above code seems to fix the spry menu hiding under flash problem for IE and Chrome.

Here are all of my settings for my vert spry menu.. mabe this will give some one an idea/ suggestion for me to fix the problem in firefox.

SpryMenuBarVetical.css

@charset "UTF-8";

/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

LAYOUT INFORMATION: describes box model, positioning, z-order

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

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 160px;
clear: none;
overflow: visible;
clip: rect(0px,0px,0px,0px);
height: auto;
}
/* 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: auto;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 160px;
background-color: #000000;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: 150px;
}

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

DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 0px none #006368;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 1px none #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #585745;
text-decoration: none;
background-image: none;
background-repeat: no-repeat;
background-color: #D7D5BE;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #BAB387;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #BAB387;
color: #FFF;
}

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

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.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical iframe
{
position: absolute;
z-index: auto;
}
/* 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.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

[abduraooft]

Could you post a link to your page?

[redwolf1430]

http://www.limetreehosting.com/testinggrounds/feed/world_coverage.php

Thanks for the help :thumbsup:

[redwolf1430]

dropping spry like a bad habit. going to use jquery, Good solution.

[cdallabetta]

Have a try by applying a 'param' to your flash object like
<param name="wmode" value="transparent" />

just ran across this and i was having the same problem. however, does this go in the html for the site? if so where?

[abduraooft]

just ran across this and i was having the same problem. however, does this go in the html for the site? if so where? to be added inside your object element used for flash file. It's better to use an SWFobject to add a flash file to your page, see http://code.google.com/p/swfobject/

[snoopelijah]

I know very little about code, but I was messing around and this worked, at least for now. It seemed that after I added <p/ > at the end of the flash code it worked. Question, why did it add a <p> at the beginning when I added one after the flash? Also, it seems to only work when I hit the enter key for a <p> tag while in design view. If I try to enter the code in myself, it won't work. Any thoughts?

<div id="container">
<div id="topleft">
<p> (this was added, when I added the one at the bottom)
<script type="text/javascript">
AC_FL_RunContent( 'codebase','https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','200','align','top','title','mission','src','Fl ash/mission','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Flash/mission','wmode','transparent' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="200" align="top" title="mission">
<param name="movie" value="Flash/mission.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" /> (also added this)
<embed src="Flash/mission.swf" width="400" height="200" align="top" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</noscript>
</p> (I wanted a space between the two divisions so I punched this in, but I did it in the design view. When I went back and tried to do the same thing via typing in the code, I didn't get the same results).
<div class="colorbackground">

[abduraooft]

Don't know what I did, but seems to be working. . .
It's better to start a new thread for yourself.
PS: Please use ][/COLOR] tags to wrap your code while posting here.

[ckid]

Hi,

Having similiar problem.
I have a spry horizontal menu bar, with sub menus. Which all work fine.
However, I have inserted a photo portfolio via an <iframe>.
Now my my drop down submenus do not show up.
Is the <iframe> photo portfolio getting confused with the iframe in the javascript code for the spry menu?

How to fix spry, to continue to insert photo portofolio via <iframe>?
www.ckinteractivedesign.com (stock photo and portfolio pages)

[Avril]

Add:
wmode="transparent"

to 'embed' as as well. That should do the trick. Hope it works.

[ckid]

working now. thank you :thumbsup: