Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    Berlin G
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Drop down troubles

    Hey All, Newbie here and was wondering if anyone was familiar with the Suckerfish Dropdown methods from A list apart?

    I have implemented them on a site I am doing for a friend and am having trouble getting it to work in IE6. Firefox, IE7 (save some positioning issues) and all other major browsers work.. just IE6 won't display the secondary menu lists. My HTML is as follows:
    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    
    </head>
    
    <body onload="MM_preloadImages('images/nzImage1.jpg')"><div id="fullwrapper">
    
    <div id="headwrapper">
    	<div id="myspace"> <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=35006292"><img src="images/myspace_banner.gif" border="0" /></a><br /><div id="number"> 1-800-658-7628 (ROCK)</div>
    	</div>
    </div>
    
    <div id="navbar"> 
    <div id="menu">
    <ul id="nav"> 
        <li><a href="http://mrmusichead.com/main/">HOME</a> 
    	  <ul> 
            <li><a href="http://mrmusichead.com/main/?page_id=22">GETTING THERE</a></li> 
          </ul>
    	</li>
        <li><a href="http://mrmusichead.com/main/?page_id=7">NEWS/EXHIBITS</a>
          <ul>
    	    <li><a href="http://mrmusichead.com/main/?page_id=20">HOT TOPICS</a></li>
            <li><a href="http://mrmusichead.com/main/?page_id=7">UPCOMING SHOWS</a></li> 
            <li><a href="http://mrmusichead.com/main/?page_id=23">POSTER ARTISTS</a></li> 
            <li><a href="http://mrmusichead.com/main/?page_id=24">PHOTOGRAPHERS</a></li> 
          </ul> 
        </li> 
        <li><a href="http://mrmusichead.com/main/?page_id=2">ABOUT</a> 
          <ul> 
            <li><a href="http://mrmusichead.com/main/?page_id=15">SAM MILGROM</a></li> 
            <li><a href="http://mrmusichead.com/main/?page_id=16">CHAILLEY GOSS</a></li> 
            <li><a href="http://mrmusichead.com/main/?page_id=17">THE GALLERY</a></li>  
          </ul> 
        </li>
        <li><a href="http://mrmusichead.com/main/?page_id=10">CONTACT US</a>
    	  <ul>
    	    <li><a href="http://mrmusichead.com/main/?page_id=26">EMAIL US</a></li>
            <li><a href="http://mrmusichead.com/main/?page_id=11">SHIPPING POLICY</a></li>
    		<li><a href="http://mrmusichead.com/main/?page_id=12">PRIVACY POLICY</a></li>
    	  </ul>
    	</li>
    	<li><a href="http://mrmusichead.com/main/?page_id=9">WEBLINKS</a></li>
    	<li><a href="http://mrmusichead.com/main/?page_id=8">GALLERY</a></li>
    	<li><a href="http://mrmusichead.com/main/?page_id=3">SHOP</a> </li> 
      </ul>
    </div>
    </div>

    My CSS is here:

    Code:
    /* dropdown styles*/
    
    #menu {
    	margin-left: 132px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	font-size: 0.99em;
    }
    
    #menu ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    
    }
    
    #menu li { /* all list items */
    	float: left;
    	position: relative;
    	width: 8.6em;
    	color: #FFFFFF;
    	background-image: url(images/navback.gif);
    	background-repeat: repeat-x;
    	border-bottom: #000000 1px solid;
    	border-left: #000000 1px solid;
    	border-right: #000000 1px solid;
    	text-align: center;
    }
    
    #menu li ul { /* second-level lists */
    	display: none;
    	position: absolute;
    	top: 0;
    	left: 0;
    	margin-top: 0;
    }
    
    #menu li ul li{
    	background-image: none;
    	background-color: #666666;
    }
    
    #menu li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    	top: auto;
    	left: auto;
    }
    
    #menu li:hover ul, li.over ul { /* lists nested under hovered list items */
    	display: block;
    }
    
    #menu a:link {
    	text-decoration: none;
    	color: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bolder;
    	font-size: 11px;
    }
    #menu a:hover {
    	color: #00CCFF;
    }
    I have bent and tweaked it from the original code and then compared it back again but am not sure what is wrong anymore.

    Anyone have an idea? Any help would be greatly appreciated,

    All the best

    $

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    You are are aware of the following right?

    • Internet Explorer 6 doesn’t support the :hover pseudo‐class on anything other than anchor elements with a href attribute. In other words, li:hover is not supported by Internet Explorer 6.
    • The child combinator (>) is not supported by Internet Explorer 6 either. Apparently, you already know this, but your CSS comment states “in browsers other than IE” when Internet Explorer 7 does support child combinators. This might be related to some of your issues in Internet Explorer 7.


    If your menu depends on the first, then that’s probably the problem.

    It doesn’t seem to be related to this issue, but you might want to work on your 63 errors/46 errors. A lot of them seem to be XHTML errors; you could save yourself the trouble of fixing them by using HTML instead.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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