Results 1 to 3 of 3

Thread: css drop down menu in IE6 does not float.

  1. #1
    Join Date
    Dec 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default css drop down menu in IE6 does not float.

    I am trying to implement a drop down menu. I have it working in IE8 and firefox but not IE6.
    It seems that the drop down menu is pushing the subsequent content out and floating over it.
    I am using the crossover.htc from "http://www.xs4all.nl/~peterned/htc/csshover3.htc"

    Question.
    How do I get a drop down menu to float in IE6?

    Any help would be greatly appreciated.
    Steve
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <style type="text/css" media="screen">
    .menuContainer *
    {
        PADDING: 0;
        MARGIN: 0;
    }
    
    .menuContainer
    {
        BACKGROUND: #52842d ;
        HEIGHT: 45px;
    }
    
    .menuContainer .left
    {
        FLOAT: left;
    }
    
    .menuContainer .right
    {
        FLOAT: right;
    }
    
    .menuh
    {
        MARGIN: 0px 9px 0px 10px;
        PADDING-TOP: 4px
    }
    
    .menuh ul
    {
        LIST-STYLE-TYPE: none;
        float:left;
        BORDER-LEFT:  #80aa66 1px solid;
        HEIGHT: 37px;
        width:8em;
    }
    
    .menuh li
    {
       position:relative;
       min-height: 1px;		/* Sophie Dennis contribution for IE7 */
       vertical-align: bottom;	/* Sophie Dennis contribution for IE7 */
    }
    
    .menuh a
    {
        display: block;
        text-align: center;
        PADDING-RIGHT: 10px;
        PADDING-LEFT: 10px;
        FONT-SIZE: 12px;
        COLOR: white;
        PADDING-TOP: 10px;
        PADDING-BOTTOM: 13px;
    }
    
    .menuh ul ul a:link, .menuh ul ul a:visited, ul ul .menuh a:active	/* menu at rest */
    {
      color: white;
    }
    
    .menuh ul ul a:hover 
    {
      color: white;
    }
    
    .menuh a:hover
    {
       background: #52842d ;
    }
    
    .menuh ul ul
    {
       position: relative;
       z-index:500;
       display:none;
       BORDER: 0px;
       background: #52842d ;
    }
    
    .menuh ul ul a
    {
       top:0;
       display:block;
       padding:0;
       text-align: left;
       padding-left: 12px;
    }
    
    .menuh li:hover
    {
      z-index:100;
    }
    
    .menuh li:hover ul ul,
    .menuh li li:hover ul ul,
    .menuh li li li:hover ul ul,
    .menuh li li li li:hover ul ul
    {display:none;}
    
    .menuh li:hover ul,
    .menuh li li:hover ul,
    .menuh li li li:hover ul,
    .menuh li li li li:hover ul
    {display:block;}
    </style>
    
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
     .menuh{float:none;}
      body{behavior:url(./js/csshover3.htc); font-size:100%;}
     .menuh ul li{float:left; width: 100%;}
     .menuh ul li a {height:1%;}
     .menuh {margin: 0;}
    
     /*.menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;} */
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div class="menuContainer">
       <div class="menuh">
         <ul>
            <li><a href="#">Scenario</a><ul>
              <li><a href="#">New</a></li><li><a href="#">Import</a></li></ul></li></ul>
         <ul>
            <li><a href="#">Controller</a><ul>
               <li><a href="#">New</a></li><li><a href="#">Import</a></li></ul></li></ul>
       </div>
    </div>
    <div style="background:red;display:block">
      hello
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    Rather than wrapping your head around IE6 and its intricacies, I recommend using an already made cross-browser multi level menu and styling it to your choice. You would achieve this much faster than debugging your crossover menu.

    Trust me. I debug for IE6 constantly.

    Use the below menu. It's robust and very flexible.

    http://www.dynamicdrive.com/style/cs...el_css_menu_2/

  3. #3
    Join Date
    Dec 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    thx. I will take a look. I was able to get it to work. IE6 is a little quirky. The div wrapper needed to have "position:absolute" to prevent the following content from being displaced.
    Code:
    .menuh
    {
        position:absolute;
        MARGIN: 0px 9px 0px 10px;
        PADDING-TOP: 4px
    }


    Steve

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
  •