FireFox and IE Multi-Level Dropdown incompatabilities

Hi, my multi level dropdown works fine in FF2 but IE7/6 is throwing the dropdown beside my 94x105 image. The dropdown is over to the right and at the top of the image. In FF2, it is below the image how it should be. I need help bad on this one. This is my first time posting cause I can code my way out of messes, but this one is ridiculous. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<link href="css/test.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
sfHover = function()
{
var menus = document.getElementsByName("nav");
for(var iMenus = 0; iMenus< menus.length; iMenus++)
{
var sfEls = menus[iMenus].getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++)
{
sfEls[i].onmouseover=function() { this.className+=" sfhover"; }
sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>

<body>
<div class="buttons">
<ul id="nav" name="nav">
<li><img src="images/prod_info.jpg" alt="" height="105" width="94" />
<ul>
<li><a href="#" class="daddy">Boxes</a>
<ul>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
</ul>
</li>
<li><a href="#" class="daddy">Through</a>
<ul>
<li><a href="#">Fire</a></li>
</ul>
</li>
<li><a href="#" class="daddy">Access</a>
<ul>
<li><a href="#">Steel</a></li>
</ul>
</li>
<li><a href="#">Competitive</a></li>
<li><a href="#">Selection</a></li>
<li><a href="#">MopTite</a></li>
</ul>
</li>
</ul>

<ul id="nav" name="nav">
<li><img src="images/specs.jpg" alt="" height="105" width="94" />
<ul>
<li><a href="#" class="daddy">Boxes</a>
<ul>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
<li><a href="#">Steel</a></li>
</ul>
</li>
<li><a href="#" class="daddy">Through</a>
<ul>
<li><a href="#">Fire</a></li>
</ul>
</li>
<li><a href="#" class="daddy">Access</a>
<ul>
<li><a href="#">Steel</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

body {
background-color: #fff;
background-image: url(../images/pt_bkgnd.jpg);
background-repeat: repeat-x;
background-position: 0 0;
text-align: center;
margin: 0;
padding: 0;
}

.buttons {
text-align: left;
width: 328px;
float: right;
margin: 73px 0 0;
padding: 0;
}

/*-DropDown --------------*/

#nav, #nav ul {
float:left;
width: 94px;
height:105px;
list-style: none;
line-height: 1;
background: white;
font: 10px arial, helvetica, serif;
padding: 0;
border: solid #ccc;
border-width: 0;
margin: 0 0 1em 0;
}

#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #333;
text-decoration: none;
padding: 0.25em 20px;
}

#nav a:hover{
color:#fff;
}

#nav a.daddy {
background: url(../images/rightarrow.gif) center right no-repeat;
}

#nav li {
float: left;
padding: 0;
width: 7.5em;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li li {
padding-right: 10px;
width: 13em;
}

#nav li ul a {
width: 13em;
w\idth: 9em;
}

#nav li ul ul {
margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #959595;
}

#nav_catalog {
float: left;
width: 94px;
height:105px;
list-style: none;
line-height: 1;
padding: 0;
border-width: 0;
margin: 0 0 1em 0;
}

FireFox and IE Multi-Level Dropdown incompatabilities

FF perfect & IE7/6 very skewed

iceman007

iceman007

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week