#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    5
    Rep Power
    0

    Fix for horizontal drop down menu in IE?


    Hi,

    I have a horizontal css menu that looks great in FF but doesn't align correctly in IE. Is anyone able to help me with a fix for IE browsers?

    HTML is

    Code:
      <!-- Begin Navigation --> 
      <div id="navigation"> 
         <ul class="nav"> 
          <li><a href="default.html">HOME</a></li> 
          <li><a href="rangemaster/about.html">ABOUT RANGEMASTER</a> 
             <ul> 
              <li><a href="http://www.rangemaster.co.uk/index_535.htm" target="_blank">COMPANY HISTORY</a></li> 
              <li><a href="http://www.rangemaster.co.uk/index_65.htm" target="_blank">PRODUCTS</a></li> 
              <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
              <li><a href="http://www.rangemaster.co.uk/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li> 
              <li><a href="rangemaster/recipes.html">GREAT RECIPE IDEAS</a></li> 
            </ul> 
           </li> 
          <li><a href="falcon/about.html">ABOUT FALCON</a> 
             <ul> 
              <li><a href="falcon/history.html" target="_blank">COMPANY HISTORY</a></li> 
              <li><a href="http://www.falconappliances.com/290.htm" target="_blank">PRODUCTS</a></li> 
              <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
              <li><a href="http://www.falconappliances.com/ProdLocator.aspx" target="_blank">HOW TO BUY</a></li> 
              <li><a href="falcon/recipes.html">GREAT RECIPE IDEAS</a></li> 
            </ul> 
           </li> 
          <li><a href="aga/about.html">ABOUT AGA</a> 
             <ul> 
              <li><a href="http://www.aga-web.co.uk/92_243.htm" target="_blank">COMPANY HISTORY</a></li> 
              <li><a href="http://www.aga-web.co.uk/89.htm" target="_blank">PRODUCTS</a></li> 
              <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
              <li><a href="http://www.aga-web.co.uk/90_253.htm" target="_blank">HOW TO BUY</a></li> 
              <li><a href="aga/recipes.html">GREAT RECIPE IDEAS</a></li> 
            </ul> 
           </li> 
          <li><a href="rayburn/about.html">ABOUT RAYBURN</a> 
             <ul> 
              <li><a href="http://www.rayburn-web.co.uk/50.htm" target="_blank">COMPANY HISTORY</a></li> 
              <li><a href="http://www.rayburn-web.co.uk/44.htm" target="_blank">PRODUCTS</a></li> 
              <li><a href="brochure.html">REQUEST BROCHURE</a></li> 
              <li><a href="http://www.rayburn-web.co.uk/48.htm" target="_blank">HOW TO BUY</a></li> 
              <li><a href="rayburn/recipes.html">GREAT RECIPE IDEAS</a></li> 
            </ul> 
           </li> 
          <li><a href="survey.html">FIND YOUR PERFECT COOKER</a> 
           <li><a href="gallery.html">PHOTO GALLERY</a> 
           <li><a href="brochure.html">BROCHURE REQUEST</a> 
         </ul> 
       </div> 
      <!-- End Navigation -->
    and CSS is

    Code:
    ul.nav,
    .nav ul{
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	display: inline;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 10px;
    	height: 25px;
    	width: 835px;
    }
    
    ul.nav{
    	display: table;
        background: url(../_images/menu.gif);
    }
    ul.nav>li{
    	display: table-cell;
    	position: relative;
    	padding: 6px 6px;
        color: #FFFFFF;
    	text-align:left;
    }
    
    ul.nav li>ul{
    	display: none;
    	position: absolute;
    	width: 150px;
    	margin-left: -10px;
    	margin-top: 6px;
    }
    
    ul.nav li:hover>ul{
    	display : block;
    }
    
    
    .nav ul li a {
    	display: block;
    	padding: 2px 10px;
    	color: #FFFFFF;
    }
    
    .nav a{
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    .nav ul li a{
    	background-color: #000000;
    	filter:alpha(opacity=80);
    	opacity: 0.8;
    	-moz-opacity:0.8;
    }
    
    .nav ul li a:hover {
    	background-color: #B3191E;
    }
    
    .nav ul li a:active {
    	background-color: #B3191E;
    }
    Many thanks...
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    IE6 and IE7 support neither display:table-cell nor display:table

    I suggest you give the <li>s float:left instead.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    5
    Rep Power
    0
    Thanks Kravitz,

    I've removed display:table-cell and added a float:left as you suggested. I also removed display:table and replaced it with display:block.

    Again this is looking great in FF and is nearly correct in IE but the drop down menus are about 30px too far over to the right.

    Is there anything I can do to rectify this?

    Code:
    /*** Nav bar styles ***/
    
    ul.nav,
    .nav ul{
    /*Remove all spacings from the list items*/
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	display: inline;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 10px;
    	height: 25px;
    	width: 835px;
    }
    
    ul.nav{
    	display: block;
        background: url(../_images/menu.gif);
    }
    ul.nav>li{
    	float:left;
    	position: relative;
    	padding: 6px 6px;
        color: #FFFFFF;
    	text-align:left;
    }
    
    ul.nav li>ul{
    /*Make the sub list items invisible*/
    	display: none;
    	position: absolute;
    	width: 150px;
    	margin-left: -10px;
    	margin-top: 6px;
    }
    
    ul.nav li:hover>ul{
    /*When hovered, make them appear*/
    	display : block;
    }
    
    
    /*Make the hyperlinks as a block element, sort of a hover effect*/
    .nav ul li a {
    	display: block;
    	padding: 2px 10px;
    	color: #FFFFFF;
    }
    
    /*** Menu colors (customizable) ***/
    .nav a{
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    .nav ul li a{
    	background-color: #000000;
    	filter:alpha(opacity=80);
    	opacity: 0.8;
    	-moz-opacity:0.8;
    }
    
    .nav ul li a:hover {
    	background-color: #B3191E;
    }
    
    .nav ul li a:active {
    	background-color: #B3191E;
    }
    Many thanks.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    IE is bad at calculating left:auto and top:auto. So set those properties to something else for "ul.nav li>ul".

    Also it's better to hide sub-menus with left:-9999px instead of display:none.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo