Overview
I originally created a CSS based dropdown dropdown to accomodate a user who at the last minute decided to include 3 more options, instead of just one buy button. When i tested it, it failed miserably in IE, i then browsed the web and came across some sites that gave me IE fixes for those issues. I then modified there code a smidge to meet the criteria i needed, but i'm having some trouble now, when implementing it into an already exsisting page (which was badly formatted i might add, im going blind looking through this). Here is the HTML :
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<ul id="nav">
<li><ahref=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=http://www.webdeveloper.com/forum/archive/index.php/"../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=http://www.webdeveloper.com/forum/archive/index.php/"../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/"" border="0"><IMG
src=http://www.webdeveloper.com/forum/archive/index.php/"../images/button_more.gif" border="0"></A></td>
</tr>
</table>
Freakin Bugs
I've used a linked button image as the first <li>. Then there is a sub <ul> with 3 <li>'s that contain images as there content. I'm using firefox, and i Download ed the "web developer" extension (which is really quite useful). It outlines block level elements, so that you can see the space alloted. When i do this it shows that the parent <ul> is spaced far to the left of the first button image with the dropdown. I've been trying for a quite a while now, and cannot figure it out. Here is my CSS code :
/* BEGIN CSS CODE */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 0;
width: 90px;
}
#nav a {
display: block;
width: 90px;
margin-top: 5px;
}
#nav li {
float: left;
width: 90px;
}
#nav li ul {
position: absolute;
width: 90px;
left: -999em;
border: 1px solid #69B1C9;
padding: 5px;
padding-top: 1px;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* END CSS CODE */
Another IE Issue
Naturally i'm having some trouble with IE. I'm using the following javascript:
<!--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 -->
which fixes most of the issues. However one problem persists: There is space inbetween where the first <li> meets the nested <ul>. This problem doesn't occur in Firefox and Netscape. I've been toying with the CSS code and failing miserably. Any possible fixes for this?
God i wish we could start developing with web standards. Thanks for any help you guys can offer. (damn that was long)IE only supports :hover for <a> tags.
I originally created a CSS based dropdown dropdown to accomodate a user who at the last minute decided to include 3 more options, instead of just one buy button. When i tested it, it failed miserably in IE, i then browsed the web and came across some sites that gave me IE fixes for those issues. I then modified there code a smidge to meet the criteria i needed, but i'm having some trouble now, when implementing it into an already exsisting page (which was badly formatted i might add, im going blind looking through this). Here is the HTML :
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<ul id="nav">
<li><ahref=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=http://www.webdeveloper.com/forum/archive/index.php/"../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=http://www.webdeveloper.com/forum/archive/index.php/"../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/"" border="0"><IMG
src=http://www.webdeveloper.com/forum/archive/index.php/"../images/button_more.gif" border="0"></A></td>
</tr>
</table>
Freakin Bugs
I've used a linked button image as the first <li>. Then there is a sub <ul> with 3 <li>'s that contain images as there content. I'm using firefox, and i Download ed the "web developer" extension (which is really quite useful). It outlines block level elements, so that you can see the space alloted. When i do this it shows that the parent <ul> is spaced far to the left of the first button image with the dropdown. I've been trying for a quite a while now, and cannot figure it out. Here is my CSS code :
/* BEGIN CSS CODE */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 0;
width: 90px;
}
#nav a {
display: block;
width: 90px;
margin-top: 5px;
}
#nav li {
float: left;
width: 90px;
}
#nav li ul {
position: absolute;
width: 90px;
left: -999em;
border: 1px solid #69B1C9;
padding: 5px;
padding-top: 1px;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* END CSS CODE */
Another IE Issue
Naturally i'm having some trouble with IE. I'm using the following javascript:
<!--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 -->
which fixes most of the issues. However one problem persists: There is space inbetween where the first <li> meets the nested <ul>. This problem doesn't occur in Firefox and Netscape. I've been toying with the CSS code and failing miserably. Any possible fixes for this?
God i wish we could start developing with web standards. Thanks for any help you guys can offer. (damn that was long)IE only supports :hover for <a> tags.