CSS Dropdown not working in IE6 or IE7

**noslenwerd** · Feb 19, 2010 09:12

There should be two items that drop down when you hover over Products.

I have used this code for a few other sites but never had this problem before.

Any help as always is greatly appreciated.

http://www.vismarkgroup.com/dev/tomboboutdoors2/

**vinpkl** · Feb 19, 2010 10:20

remove "left:-999em" and it will work fine in IE 6/7.

Code:

ul#nav li ul { 
position: absolute; 
width: 135px; 
left: -999em;  /*remove this */
background-color: #0C4000 }

Vineet

**noslenwerd** · Feb 19, 2010 10:27

Originally Posted by vinpkl

remove "left:-999em" and it will work fine in IE 6/7.

Code:

ul#nav li ul { 
position: absolute; 
width: 135px; 
left: -999em;  /*remove this */
background-color: #0C4000 }

Vineet

hmm i tried doing that but now the dropdown is permanently "dropped". Even when you aren't hovering.

**Rayzur** · Feb 19, 2010 10:45

Hi,
You do not have a doctype on your page and IE is in quirks mode.

Also, a better method is to hide the the sub ul with a negative left margin instead of left position. Set the left position at zero at all times then bring it back into view with margin-left:0 on hover.

Set the relative position on the "li" after that so it becomes the containing block for the sub ul.

(Scroll all the way through the codebox)

Code:

ul#nav {
    z-index: 50;
    margin: 0 0 1px 0;
    padding: 0;
    list-style: none;
    /*position: relative;*/
    width: 880px;
    height: 38px;
    line-height: 38px;
    clear: both;
    background: green url(../images/menubar.png) no-repeat;
    padding-left: 2px
}
ul#nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background: #FFF;
    line-height: 20px;
}
ul#nav li {
    float: left;
    /*display: block;*/
    position: relative;
    padding: 0;
}
ul#nav li a {
    padding: 0 16px;
    display: block;
    font: 16px/39px georgia, times, serif;
    text-decoration: none;
    color: #fff;
}
ul#nav li a:hover {
    color: #fdc040;
    background-color: #0C4000;
}
ul#nav li ul {
    position: absolute;
    width: 135px;
    left:0;
    margin-left: -999em;
    background-color: #0C4000
}
ul#nav li li {
    margin: 0;
    padding: 0;
    float: left;
}
ul#nav li li  a {
    background-image: none;
    padding: 6px;
    border-bottom: 1px solid #d2d2d2;
    width: 123px;
    display: block;
    font-weight: normal;
    color: #ffffff;
    font: normal 14px georgia, times, Helvetica;
    text-decoration: none;
}
ul#nav li li  a:hover {
    color: #fdc040;
    background-color: #0e7300;
}
ul#nav li:hover ul {
    margin-left:0;
    cursor: pointer;
}
ul#nav li:hover ul, #nav li.sfhover ul {
    margin-left: 0;
}

**Rayzur** · Feb 19, 2010 11:19

As far as the doctype I mentioned you will do just fine with HTML 4.01 Strict, It looks like you also need to get the sfhover script in place for IE6.

Here are both of those changes, move the script to it's own file and link to it via CC for IE6.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>TomBob Outdoors LLC. - Environmentally Friendly, Lead-Free Products for the Serious Outdoorsman</title>

<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
    var sfEls = document.getElementById("nav").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>
<![endif]-->

<style type="text/css">
body {
    background-color: #895522;
    background-image: url(images/logs.png);
    background-repeat: repeat-x;
}
#pcm{display:none;}
 
</style>

<link href="tombob.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

You can also get rid of that .navcontainer div since it is not doing anything.

HTML Code:

      <td width="884" height="38" background="images/TomBob-HomePageConcept_15.png">   
        <ul id="nav"><!--@begin nav -->
          <li><a id="home" href="index.php"><span>Home</span></a>
          </li>
          <li><a id="about" href="about.php"><span>About</span></a>
          </li>
          <li><a id="products" href="products.php"><span>Products</span></a>
            <ul>
              <li><a href="fishing-products.php"><span>Fishing Products</span></a></li>
              <li><a href="hunting-products.php"><span>Hunting Products</span></a></li>         
            </ul>
          </li>
          <li><a id="news" href="news.php"><span>News</span></a>
          </li>
          <li><a id="links" href="links.php"><span>Links</span></a>
          </li>
          <li><a id="contact" href="contact.php"><span>Contact</span></a>
          </li>    
        </ul><!--@end nav-->
      </td>

The css I posted above works fine with both IE6/7 along with those html adjustments.

**noslenwerd** · Feb 19, 2010 14:32

Rayzur, as always thank you so much.

Was in meetings all day and have not yet had a chance to plug this in, but I will do so soon.

Thank you again.

**noslenwerd** · Feb 22, 2010 08:03

Thanks Raymur!

Now for some reason we are getting a little 10px gap below the header and above phone number field.

My coworker is still using dreamweaver with tables and I am trying very hard to get him converted to css to avoid these types of issues

**RyanReese** · Feb 22, 2010 08:45

Probably just the whitespace left under images to allow for text nodes

. Can't test since the college comptuers don't have firebug.

Code:

 img{vertical-align:bottom;}

**noslenwerd** · Feb 22, 2010 08:59

Originally Posted by RyanReese

Probably just the whitespace left under images to allow for text nodes

. Can't test since the college comptuers don't have firebug.

Code:

 img{vertical-align:bottom;}

woot!

Thanks Ryan!

**RyanReese** · Feb 22, 2010 18:47

You're welcome

.

User Tag List

Thread: CSS Dropdown not working in IE6 or IE7

Thread Tools

Display

CSS Dropdown not working in IE6 or IE7

Bookmarks

Bookmarks

Posting Permissions