CSS menu (hover>reveal) Is "Underlapping" Flash Object

I'll take a link to the problem too. Although my gut is screaming "z-index! z-index!"

Without the code, I also have a shot in the dark. But, it may come in handy to someone...

If you're using SWFObject.js, try setting wmode to opaque. Doing so resolved that issue for me once. (http://www.adobe.com/devnet/flash/articles/swfobject_03.html)

hey sorry late reply.

I include the css + JS i'm using.
its a simple suckerdiv but perhaps i have made a change in customising it that has resulted in the layering problems..
cheers

/*Credits: Dynamic Drive// thanks to suckerdiv*/

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout // IE7 */
color: #F0FFF0;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

.suckerdiv ul li a:visited{
color: #F0FFF0;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

.suckerdiv ul li a:hover{
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing-bold.jpg)
}

.suckerdiv .subfolderstyle{
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

/* Holly Hack 4 IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas credit to dynamicdrive suckertree

function buildsubmenus(){
for (var i=0; i-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

CSS and JS are only a part of the picture. I can't understand it unless I see it. Sorry.

not a problem, if you look in the code the url is in there.
http://www.rapanuiclothing.com
cheers
(obviously the flash object is not in, but will be embedded as per normal with the W3C standard get-around method)

Eh, my mistake, missed that.

So, you're sure that the menus will not show over the flash object? Have you tried this using the z-index property? I've not experienced any flash movie website coding, so I'm not all that familiar, but I would think a z-indes of 1 on the flash movie and a 2 on the menu( would do the trick.

Also your nav breaks on three resizes in Firefox - might want to change them to images.

http://www.rapanuiclothing.com/css-maker-demo.html

thats a quick sketch then to make it clearer

cheers i will give the z index a shot tonight.

have tried a couple of methods.
one was putting object.style.zIndex="-1"
on the flash animation and
z-index:+2;
in the css of the second layer sub menus.

no luck...
i also tried allocating "class" z index to the two and that didnt work.
heres the full code with the z index in the css sub menu and the flash object.
the url is http://www.rapanuiclothing.com/css-maker-demo.html

i maybe missing something obvious as im pretty new to web design.
cheers

Rapanui ™ - The Green Clothing Company Organic Clothing, organic t-shirt, sustainable eco clothes

/*Credits: Dynamic Drive// thanks to suckerdiv*/

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout // IE7 */
color: #F0FFF0;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

.suckerdiv ul li a:visited{
color: #F0FFF0;
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

.suckerdiv ul li a:hover{
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing-bold.jpg)
}

.suckerdiv .subfolderstyle{
background: url(http://www.rapanuiclothing.com/test/images/rapanewi/green-menu-clothing.jpg)
}

/* Holly Hack 4 IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

Mens

• View All
• Ethical Underwear
• Garuhoa Organic T-Shirt
• Eko Bamboo T-Shirt
• Kokorua Long-Sleeve
• Kopeka Organic Hoody
• Hoplite Organic Zip-Up
• Ethical Gift Voucher

Womens

• View All
• Ethical Underwear
• Koko Fitted Organic T-Shirt
• Maeko Strap Top
• Voveki Bamboo Top
• Eoke Organic Zip-Up
• Dragonfly Organic Hoody
• Ethical Gift Voucher

Environmental Ethics

• Natural & Organic Fabrics
• Fairly Manufactured
• Renewable Energy Power
• Sustainable Ethos
• 5% for the Planet
• Transparency

News

• Headlines & Blog
• Top Tips for Going Green
• Newsletter

Lunchbreak Gallery

Surf Forecast

Wholesale Organics

• Media
• Retail & Wholesale
• Bespoke

Testimonials

Climate Change

Customer FAQ

Contact

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','638','height','320','title','rapanui organic clothing','src','flashtest','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','flashtest' ); //end AC code

 

 

Press Release • mens organic clothing • womens organic clothing • eco-friendly ethos • surf forecast • surf gallery • wholesale organic clothing

returns policy • sizing • green credentials • organic • FAQ • eco-fashion • 5% for the planet • sitemap • gallery user manual •contact us

© Rapanui Organic Clothing ™ 2008 • Valid W3C CSS

_uacct = "UA-2984118-1";
urchinTracker();

Flash is a windowed object. That means the Flash is not a part of the browser canvas, riding 'above' it. Everything in the browser will be 'under' the Flash.

You may add the wmode attribute to embed, and to the param element with a value of opaque. Eg. wmode="opaque" or <param name="wmode" value="opaque">. This makes the object windowless. The windowing mode may be compiled into the original code to avoid having to do it this way.

cheers,

gary

have given that a go...
putting just above

so the flash code looks like

AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','638','height','320','title','rapanui organic clothing','object.style.zindex','-1','src','flashtest','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','bgcolor','#FFFFFF','movie','flashtest' ); //end AC code










i have left in the z indexing in for now.

i cant think what else to try....? putting the param= opaque in as an attribute // whatever doesnt work out either.

i might just jump off a cliff instead..!

Well, it worked when I tested, and it seems to work now. At least in Firefox.

cheers,

gary

Attachment	Size
flash.jpg	97.57 KB

yeh no luck in other versions of firefox, IE, opera etc. though

really want to nail this and move on,
but i cant see what else there is to try...

I suspect, but haven't tested, that javascript is the culprit. Refactor your menu to work without javascript (at least in everything but IE<7). Then, test with javascript disabled.

cheers,

gary