Chrome menu on header overlaps content div

[Moroose]

Hi everyone
This is my first post and am glad to join my fellow issue and fix posters
Just implemented the chrome menu on my page header(a css 3 cols layout),looked fine except that it overlaps what's beneath it(content div).This is understandable since the header has a fixed height.Trying around the visibility and the z-index didn't work for me.
Would be very grateful to anyone who can help me here.
Thanks a lot in advance.
Moroose.
N.B By overlappin i mean the menu streches and hides behind the content div.

[sustain]

I am having a similar problem.

I have installed the menu and it works perfectly, except on pages where there is flash content. The submenus hide behind the flash content.

Any clue on why it would work over text and images and not flash?

[mole2000]

Chrome CSS Drop Down Menu
http://www.dynamicdrive.com/dynamici...rome/index.htm


Having the SAME problem!!! The menu hides behind any Flash that is on the page. A sample can be seen here:

http://www.jtc-mail.com/depo/sample4/default.htm

Could a workaround be designed using layers? I'm not very familiar with layers, but I'm not sure how to fix this either. Any ideas???

John C

[arossphoto]

Same problem with AnyLink CSS Menu and the DHTML tooltips. Flash movies always display on top.

I hope there is a solution.

Cheers,

Andrew

[jscheuer1]

There are now three solutions to this problem that have been outlined in these forums. Which one(s) you use depends upon the situation, your ability to write code and how particular you want to be.

1 ) With Flash, often all that is required is that you set the parameters correctly in your object/embed tag -

Follow the detailed information at:

http://www.macromedia.com/cfusion/kn...fm?id=tn_14201

Or, if this short version (good in most cases) fixes it, so much the better! Add in this language to your object/embed tag:

Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

Add the following attribute to the EMBED tag:

wmode="transparent"

2 ) With other types of interfering content, making said content visibility:invisible or display:none (once again depending upon the situation) temporarily, often takes care of it but, can look a tad bit unprofessional.

3 ) If the problem is with non-Flash content and only occurs in IE, an iframe 'shim' with a higher z-index than the offending content and the same position and dimensions as the drop down can be placed underneath the drop down content which in turn must have a higher z-index than the iframe. Both the iframe and the drop down must be either position:relative or position:absolute.

[itp]

OK. I am looking at solution #2.

I have figured out where to make my page content hidden. (see below)

Now where would I add the "visible" property to bring content back
when user moves mouse off menus or drop-downs.

thanks
itp

    dropit:function(obj, e, dropmenuID)
    {
        if (this.dropmenuobj!==null) //hide previous menu
        this.dropmenuobj.style.visibility="hidden";

        this.clearhidemenu();
        // **********turn off upper page content here *********
        document.getElementById("visibility").style.visibility = "hidden";
        // ******************************************** 
        if (this.ie||this.firefox)
        {
            obj.onmouseout=function()
            {cssdropdown.delayhidemenu()
            }
            this.dropmenuobj=document.getElementById(dropmenuID)
            this.dropmenuobj.onmouseover=function()    {cssdropdown.clearhidemenu()}
            this.dropmenuobj.onmouseout=function(){cssdropdown.dynamichide(e)}
            this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
            this.showhide(this.dropmenuobj.style, e, "visible", "hidden")
            this.dropmenuobj.x=this.getposOffset(obj, "left")
            this.dropmenuobj.y=this.getposOffset(obj, "top")
            this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
            this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
            
        }
    },