Bizarre Son of Suckerfish ie6/ie7 problem - 2 letters from right-most dropdown menu also appearing on left side of screen

Question

I'm interning for an NGO in India and trying to fix their website, including updating their menu so it's not the last item on the page to load, and it's centered on the screen. Everything works well enough but when I try out my new menu in IE6, I get this weird error where the content below the menu is padded an extra 30px or so and the material in the right-most drop down appears on the far left of the screen, always visible. When I drop down the rightmost link ("Publications") the content appears both in the correct location and in the same spot on the far left of the screen, and changes color when I hover as well. It's tough to describe, so it would probably be best if you took a look:

visit http://sevamandir.org/a30/aboutus.htm in your IE6/IE7 browser to see for yourself. I really appreciate your help. Also I'm using a 1000px wide monitor, if there's more hijinks going on outside that space I'd like to know about that too.

I took a look at the problem again and it's even weirder than I thought. Only two letters of the bottom-most drop down menu item are shown, no matter how many items are in the left-most drop down menu. When I delete the left-most drop down menu, the bottom item from the next left-most item shows up in the same space. The padding between the menu and the content is always the same. When I hover over the real menu item, the two letters on the left hand side change color to match the hover color.

Unfortunately many people that visit our website are using old browsers so IE6 support is pretty crucial, this problem is really weird though, and I would appreciate some help.

I uploaded a file with the entire style.css sheet in the and HTML code below, at http://sevamandir.org/a30/aboutus.htm.

Here's the relevant code:

in the html head:

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

text surrounding the menu - the menu is simply

<ul id="nav"><li></li></ul>

etc.

<!--begin catchphrase-->
    <div style="float:left; height:27px; width:520px; margin:0px; font:16px Arial, Helvetica, sans-serif; font-weight:bold; color:#769841;">
        Transforming lives through democratic &amp; participatory development
    </div>

    <?php include("menu.php"); ?>

    </div><!-- end header -->
<!--begin main text div-->
<div id="maincontent">

Relevant menu CSS:

#nav, #nav ul {
font:bold 11px Verdana, sans-serif;
float: left;
width: 980px;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: solid #769841;
border-width: 0;
margin: 0 0 1em 0;
}

#nav a {
display: block;
width: 140px;           /*this is the total width of the upper menu*/
w\idth: 120px;          /*this is the width less horizontal padding */
padding: 5px 10px 5px 10px; /*horiz padding is the 2nd & 4th items here - goes Top Right Bottom Left */
color: #ffffff;
background:#b6791e;
text-decoration: none;

}

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

#nav li {
float: left;
padding: 0;
width: 140px;           /*this needs to be updated to match top #nav a */
background:#b6791e;
}

#nav li:hover, #nav li a:hover, #nav li:hover a {
background:#769841;
}

#nav li:hover li a {
    background:#ffffff;
    color:#769841;
}



#nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 14.4em;
    w\idth: 13.9em;
    font-weight: bold;
    border-width: 0.25em;       /*green border around dropdown menu*/
    margin: 0;
}

#nav li ul a {
    background:#ffffff;
    color:#769841;
}

#nav li li {
    padding-right: 1em;
    width: 13em;
    background:#ffffff;
}

#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: #769841;
    color:#ffe400;
}

#nav li a:hover, #nav li li a:hover, #nav li:hover li:hover, #nav li.sfhover a:hover {
    background: #769841;
    color:#ffe400;
}

Answer 1

The problem was the IE Ghost text bug, which is caused by having too many HTML comment tags between floated items. Read more here http://www.toastedweb.si/docs/ie_ghost_text_bug_fix.html