Bizarre Fils de Suckerfish ie6/ie7 problème - 2 lettres du menu déroulant à droite apparaissant également sur le côté gauche de l'écran

Question

Je suis internant pour une ONG en Inde et essayant de réparer leur site Web, y compris la mise à jour de leur menu afin qu'il ne soit pas le dernier élément sur la page à charger, et il est centré sur l'écran. Tout fonctionne assez bien mais quand j'essaye mon nouveau menu dans IE6, j'obtiens cette erreur bizarre où le contenu au-dessous du menu est rembourré un 30px ou plus et le matériel dans le menu déroulant le plus à droite apparaît à l'extrême gauche du écran, toujours visible. Lorsque j'abaisse le lien le plus à droite ("Publications"), le contenu apparaît à la fois au bon endroit et au même endroit à l'extrême gauche de l'écran, et change de couleur lorsque je le survole également. Il est difficile de décrire, donc il serait probablement mieux si vous avez jeté un coup d'oeil:

visitez http://sevamandir.org/a30/aboutus.htm dans votre navigateur IE6/IE7 pour voir par vous-même. J'apprécie vraiment votre aide. J'utilise aussi un moniteur large 1000px, s'il y a plus d'hijinks en dehors de cet espace, j'aimerais en savoir plus.

J'ai jeté un coup d'oeil au problème encore et c'est encore plus bizarre que je pensais. Seules deux lettres de l'élément de menu déroulant le plus bas sont affichées, quel que soit le nombre d'éléments dans le menu déroulant le plus à gauche. Lorsque je supprime le menu déroulant le plus à gauche, l'élément du bas de l'élément le plus à gauche apparaît dans le même espace. Le remplissage entre le menu et le contenu est toujours le même. Lorsque je survole l'élément de menu réel, les deux lettres sur le côté gauche changent de couleur pour correspondre à la couleur du survol.

Malheureusement, beaucoup de gens qui visitent notre site utilisent d'anciens navigateurs, donc le support d'IE6 est assez crucial, ce problème est vraiment bizarre, et j'apprécierais de l'aide.

J'ai téléchargé un fichier avec toute la feuille style.css dans le code HTML ci-dessous, au http://sevamandir.org/a30/aboutus.htm.

Voici le code correspondant:

dans la tête html:

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

texte

entourant le menu - le menu est tout simplement

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

Menu pertinent 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

Le problème était le bogue de texte IE Ghost, causé par le fait qu'il y avait trop de balises de commentaire HTML entre les éléments flottants. En savoir plus http://www.toastedweb.si/docs/ie_ghost_text_bug_fix.html