Results 1 to 6 of 6

Thread: Chrome menu on header overlaps content div

  1. #1
    Join Date
    Feb 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Chrome menu on header overlaps content div

    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.

  2. #2
    Join Date
    Feb 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  3. #3
    Join Date
    Mar 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Menu hides behind Flash!!

    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

  4. #4
    Join Date
    Mar 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    I hope there is a solution.

    Cheers,

    Andrew

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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

    PHP Code:
        dropit:function(objedropmenuID)
        {
            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.stylee"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"
                
            
    }
        }, 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •