Menu drop downs hidden with fixed header

2 posts, 1 answers
  1. Nicko
    Nicko avatar
    5 posts
    Member since:
    Jul 2010

    Posted 03 Sep 2010 Link to this post

    I am working on a website which is for IE only but it must run in ie 6 and up. We have a fixed header with CSS styles and in that header we have a rad menu. The only way we can get the rad menu drop down menu to display properly is by modifying the doc type from:

     

     



    <!
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     



    to

    <!

     

     

    DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    What is happening is the menu drop down executs but it is hidden behind the main web content container. The main web content container is compised of a rad splitter. However, when we change the doc type to 4.0 so that the site works in IE8 with compatiblity mode turned on the page layout works but many of our other pieces are broken because then need the doc type to be xhtml.

    Basically we have


    fixed header
         rad menu
    -------------
    m| main
    e| content
    n|
    u|


    The CSS I am use to accomplish this is:

     

    html{ 
      
    height: 100%
    margin: 0px
    padding: 0px
      
      
    * html html {
    height: 100%
    margin: 0px
    padding: 0px
      
    body { 
    height:100%;
    MAX-HEIGHT: 100%
    border: 0px;
    padding:0px;
    margin: 0px
    padding-top:94px
    background:#fff
    font-family:arial, verdana, sans-serif
    font-size:76%;
    overflow: hidden
    }
      
    * html body {
    PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 99px;
      
    }
      
    #container {
    width: 100%
    height:100%;
    top: 120px
    right: 0px
    left: 0px
    text-align: left
    overflow: auto
    }
      
    * HTML #contianer
    {
    height:100%;
    }
      
    #header {
    position: absolute
    height:90px
    width:100%;
    overflow: hidden
    top: 0px
    left: 0px;
    border-bottom: #ccc 4px solid
      
    }
      
    * HTML #header 
    {
    overflow:visible;
    HEIGHT: 90px
    }


    Any help you can offer would be much appreciated thanks.

     

     

     

     

     

  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 07 Sep 2010 Link to this post

    Hello Nicko,

    Where you have just #header, change the overflow property to visible, instead of hidden and see if that helps. The reason being, because you set you #header section's position to absolute and the RadMenu drop-down is also set to absolute the overflow style affects the drop-down because both positions are the same. So you have two options, change the position type or the overflow type.

    I hope that helps.
Back to Top