...

View Full Version : CSS Drop down troubles



scubadollar
05-17-2007, 04:59 PM
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:

<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:


/* 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:confused:

$

Arbitrator
05-18-2007, 12:46 AM
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 (http://www.validome.org/validate/?uri=http%3A%2F%2Fmrmusichead.com%2Fmain%2F)/46 errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmrmusichead.com%2Fmain%2F). A lot of them seem to be XHTML errors; you could save yourself the trouble of fixing them by using HTML instead.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum