Dropdown irgendwie seitlich verschoben

[furios]

Hallo,

nach einigem Getüftel ist mir nun doch ein Dropdown auf dieser Seite gelungen:
SEO Consulting - SEO Beratung

Allerdings funktioniert der Spaß in IE5-7 nicht. Daher habe ich ein JS Script benutzt (hover.js), um es zum Funktionieren zu bringen. In dem IE7 den ich hier auf dem PC habe wird das Dropdownmenü, dass durch JS erzeugt wird jedoch seitlich verschoben (nach rechts) angezeigt.

Kann mir da jemand sagen, was ich da machen kann, um das zu fixxen? Den Code habe ich mal angehängt.

<div id="menu">
<ul id="nav">
                <li><a href="seo-services.html" id="menu1" accesskey="1">Dienstleistungen</a></li>
                <li><a href="kontakt.html" id="menu2" accesskey="2">Kontakt</a></li>
                <li><a href="suchmaschinenoptimierung-kosten.html" id="menu3" accesskey="3">Kosten</a></li>
                <li><a href="referenzen.html" id="menu4" accesskey="4">Referenzen</a></li>
                <li><a href="" id="menu5" accesskey="5" title="Corporate Social Responsiblity" alt="Corporate Social Responsiblity">CSR</a></li>
                <li><a href="seo-begriffe.html" id="menu6" accesskey="6">Mehr &or;</a>
<ul id="nav">
<li><a href="seo-begriffe.html">Glossar</a></li>
<li><a href="regionale-suchmaschinenoptimierung.html">Regional</a>
</ul>
               </li>

        </ul>
</div>

#menu { width: 759px; height:45px; padding-bottom: 10px; margin: 0px auto; }
#menu ul,.menu ul * { margin:0; padding:0; list-style:none; }
#menu ul { height:30px; float:left; width:760px; }
#menu ul li { float:left; }
#menu ul li a { float: left; width: 126px; height: 28px; padding: 8px 0px 0px 0px; background: url(images/homepage033.gif) no-repeat left top;    text-align: center; text-decoration: none; font-size: 12px; font-weight: bold; color: #FFFFFF; }
#menu ul li a:hover, #menu ul li .active a { background: url(images/homepage044.gif) no-repeat left top; }
#menu ul li ul { position:absolute; left:-999em; width:10em; margin-top:35px; }
#menu ul li:hover ul,.menu ul li.sfhover ul { left:auto; z-index:10!important; }
#menu ul li ul li { display:block!important; border-top:none!important; text-align:left; width: 10em; }

#nav li:hover ul, #nav li.sfhover ul {
        left: auto;
}

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

Vlt. hilft auch das hier: Son of Suckerfish Dropdowns | HTML Dog meinem Fehler auf die Schliche zu kommen?

GROSSES DANKE!

 

[Timmer]

Wie wärs mit Conditional Comments? Damit kannst du CSS-Anweisungen für bestimmte Browser vornehmen =) Ansonsten sehe ich keinen Fehler...

 

[furios]

Naja, leider nicht fehlerfrei, im IE7 z.B. ist das Dropdown seitlich verschoben:



Gibts dafür eine Lösung?

 

[Timmer]

Ähm, was habe ich oben geschrieben? Conditional Comments!

Du erstellst damit einfach eine CSS-Anweisung nur für den IE7, dass das Dropdown ein margin-left:-xyz px hat.

 

[Gilles]

Könntest du mal bitte deinen HTML Kopf posten? Vom Doctype bis einschließlich head?
Hab das Gefühl der IE arbeitet bei dir auf grund fehlenden Doctypes im Quirks Mode.
Sollte der IE tatsächlich trotz strict mode Probleme machen, liegt es aber auch nur am CSS und nicht am Javascript :)

 

[marc2010]

Ich gebe Timmer recht das ist richtig