14 replies [Last post]
martinnit
Offline
newbie
uk
Last seen: 14 years 39 weeks ago
uk
Joined: 2008-01-29
Posts: 8
Points: 0

css vertical menu with hover over & reveal lists is working fine,
but to the right of it, (on the home page) is a flash animation.
when the sub menu reveals, it appears "behind" the flash image.
i have tried both "twice cooked" and Object methods, but it wont have it.
is there any way to allow the css sub menu (simple "suckerdiv) to appear above the flash object>?
cheers

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

(No subject)

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

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 7 years 13 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Without the code, I also

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)

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

martinnit
Offline
newbie
uk
Last seen: 14 years 39 weeks ago
uk
Joined: 2008-01-29
Posts: 8
Points: 0

hey sorry late reply. I

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)

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

CSS and JS are only a part

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

martinnit
Offline
newbie
uk
Last seen: 14 years 39 weeks ago
uk
Joined: 2008-01-29
Posts: 8
Points: 0

not a problem, if you look

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)

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 46 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Eh, my mistake, missed

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(Drunk would do the trick.

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

martinnit
Offline
newbie
uk
Last seen: 14 years 39 weeks ago
uk
Joined: 2008-01-29
Posts: 8
Points: 0

http://www.rapanuiclothing.co

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

thats a quick sketch then to make it clearer

martinnit
Offline
newbie
uk
Last seen: 14 years 39 weeks ago
uk
Joined: 2008-01-29
Posts: 8
Points: 0

cheers i will give the z

cheers i will give the z index a shot tonight.

martinnit
Offline
newbie
uk
Last seen: 14 years 39 weeks ago
uk
Joined: 2008-01-29
Posts: 8
Points: 0

z index nightmare

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

rapanui the green clothing company


  • Mens
  • Womens
  • Environmental Ethics
  • News
  • Lunchbreak Gallery
  • Surf Forecast
  • Wholesale Organics
  • 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 Releasemens organic clothing womens organic clothing eco-friendly ethossurf forecastsurf gallerywholesale organic clothing

    returns policy sizing green credentialsorganic FAQeco-fashion5% for the planetsitemap gallery user manualcontact us


    © Rapanui Organic Clothing ™ 2008Valid W3C CSS

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

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 1 year 49 weeks ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    Flash is a windowed object.

    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

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    martinnit
    Offline
    newbie
    uk
    Last seen: 14 years 39 weeks ago
    uk
    Joined: 2008-01-29
    Posts: 8
    Points: 0

    still no...

    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..!

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 1 year 49 weeks ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    Well, it worked when I

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

    cheers,

    gary

    AttachmentSize
    flash.jpg 97.57 KB

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    martinnit
    Offline
    newbie
    uk
    Last seen: 14 years 39 weeks ago
    uk
    Joined: 2008-01-29
    Posts: 8
    Points: 0

    no IE

    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...

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 1 year 49 weeks ago
    Dallas
    Timezone: GMT-6
    Joined: 2004-06-25
    Posts: 9776
    Points: 3858

    I suspect, but haven't

    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

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.