www.webdeveloper.com
Results 1 to 2 of 2

Thread: IE6 adding gaps to CSS menu = pop-outs disappear!

  1. #1
    Join Date
    Oct 2007
    Posts
    161

    IE6 adding gaps to CSS menu = pop-outs disappear!

    In IE6 my CSS menu is adding gsp to the pop-out elements of the menu, and as soon as you try to mouse over anything other than the first item in the menu, the whole menu disappears (as soon as you hit one of the gaps)

    Heres the CSS:


    Code:
    #lh-menu {
    	width: 130px;
    	background-color: #685C8C;
    }
    #lh-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #lh-menu a, #lh-menu h2 {
    	display: block;
    	margin: 0;
    	font-family: Calibri, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    }
    #lh-menu h2 {
    	font-size: 14px;
    	height: 20px;
    	line-height: 20px;
    	color: #FFFFFF;
    	font-variant: small-caps;
    	padding-left: 5px;
    	font-weight: bold;
    }
    #lh-menu a {
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #685C8C;
    	margin: 0px;
    	padding-top: 2px;
    	padding-right: 2px;
    	padding-bottom: 4px;
    	padding-left: 4px;
    }
    #lh-menu a:hover {
    	color: #FF0000 !important ;
    	background-color: #685C8C;
    }
    #lh-menu ul ul ul {
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    #lh-menu li {
    	position: relative;
    	background-color: #685C8C;
    	width: 130px;
    }
    #lh-menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
    div#lh-menu ul ul ul 
    {display: none;}
    div#lh-menu ul ul li:hover ul 
    {display: block;}
    div#lh-menu ul ul ul,
    div#lh-menu ul ul li:hover ul ul
    {display: none;}
    div#lh-menu ul ul li:hover ul 
    {display: block;}
    div#lh-menu ul ul ul,
    div#lh-menu ul ul li:hover ul ul
    {display: none;}
    div#lh-menu ul ul li:hover ul,
    div#lh-menu ul ul ul li:hover ul
    {display: block;}
    and the url to view the page is: http://www.telecom-sync.com/index.php

    The bottom item on the menu "Previous Events" is my main problem as this has several levels to the menu which can't be accessed in IE6 because of this problem!!

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Maybe you should give those LI certain size and margins 0. And a line-height, same as the height

    As it is not an essential bug (the navigability remains the same) my advice is not to bother too much about IE6. IE6 is an awful browser and you will spend a lot of time to find workarounds for his many bugs. Even Microsoft decided to stop supporting IE6 and tries to persuade the users to switch at least to IE7, if not IE8 or straight IE9. We all hope that IE6 will be extinct soon

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles