I'm using the suckerfish dropdown menu, and it's working in Firefox and IE (because of the JavaScript). However, IE is having trouble with the alignment of my nested <ul>. It places it around 200 or more pixels off to the right and down. I'm attempting to implement this for a project that was already coded with a tabular layout. The code works fine when placed in its own HTML file with just the unordered list in it, however when inserted into the other document, the positioning blows up in IE.
I made the mistake of showing my boss this little dropdown, and now we "need" it this week for the site, and i can't get it to work properly for IE.
Here is the CSS:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 0;
width: 100px;
}
#nav a {
display: block;
width: 90px;
margin-top: 5px;
}
#nav li {
float: left;
width: 90px;
}
#nav li ul {
position: absolute;
width: 100px;
left: -999em;
border: 1px solid #69B1C9;
padding: 5px;
padding-top: 1px;
}
#nav li:hover ul, li.hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Here is the HTML:
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/button_buy.gif" border="0" width="46" height="15" alt="" align="right"></a> <ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/barnesandnoble.gif" border="0" width="90" height="20" alt="Click Here to purchase this item from Barnes & Noble"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/amazon.gif" border="0" width="90" height="18" alt="Click Here to purchase this item from Amazon"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/amazonca.gif" border="0" width="80" height="23" alt="Click Here to purchase this item from Amazon Canada"></a></li>
</ul>
</li>
</ul>
</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/spacer.gif" width="4" height="1" alt=""></td>
<td valign="bottom"><A HREF=http://www.webdeveloper.com/forum/archive/index.php/"../books/startlate_about.php" border="0"><IMG src="../images/button_more.gif" border="0"></A></td>
</tr>
</table>
The Java Script is called from an external file:
<!--BEGIN JAVASCRIPT FIX FOR IE -->
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<!--END JAVASCRIPT FIX FOR IE -->Update:
I found a link to the "son of suckerfish" menu, and after some fiddling, customized the menu to fit perfectly. The positioning was strange again, but i managed to tweak it enough accomodate my needs.
I made the mistake of showing my boss this little dropdown, and now we "need" it this week for the site, and i can't get it to work properly for IE.
Here is the CSS:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 0;
width: 100px;
}
#nav a {
display: block;
width: 90px;
margin-top: 5px;
}
#nav li {
float: left;
width: 90px;
}
#nav li ul {
position: absolute;
width: 100px;
left: -999em;
border: 1px solid #69B1C9;
padding: 5px;
padding-top: 1px;
}
#nav li:hover ul, li.hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Here is the HTML:
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/button_buy.gif" border="0" width="46" height="15" alt="" align="right"></a> <ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/barnesandnoble.gif" border="0" width="90" height="20" alt="Click Here to purchase this item from Barnes & Noble"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/amazon.gif" border="0" width="90" height="18" alt="Click Here to purchase this item from Amazon"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="new"><img src="../images/amazonca.gif" border="0" width="80" height="23" alt="Click Here to purchase this item from Amazon Canada"></a></li>
</ul>
</li>
</ul>
</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/spacer.gif" width="4" height="1" alt=""></td>
<td valign="bottom"><A HREF=http://www.webdeveloper.com/forum/archive/index.php/"../books/startlate_about.php" border="0"><IMG src="../images/button_more.gif" border="0"></A></td>
</tr>
</table>
The Java Script is called from an external file:
<!--BEGIN JAVASCRIPT FIX FOR IE -->
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<!--END JAVASCRIPT FIX FOR IE -->Update:
I found a link to the "son of suckerfish" menu, and after some fiddling, customized the menu to fit perfectly. The positioning was strange again, but i managed to tweak it enough accomodate my needs.