/JS Dropdown-Menü im IE "springt"

[Elya]

Hallo,
nachdem ich jetzt eine Weile gefrickelt und Fehler gesucht habe, muß ich es Euch doch vorstellen: meinen Versuch einer Klappmenü-Umsetzung mit CSS und JS für IE. Ich verlerne täglich....

Auf Basis des SELF-Artikels und des Alistapart-Artikels habe ich folgendes gebaut:

http://www.visuelya.de/selftest/test.html

Das ganze wird noch etwas komplexer, ich habe es für Testzwecke auf das wesentliche reduziert. Im IE6 (die anderen lasse ich im Moment noch außen vor) "springt" das Menü beim hovern. Unabhängig davon, ob ich das Self-JS oder das Alistapart-JS benutze (die sich vermutlich sowieso nur stilistisch unterscheiden).

Die den Fehler auslösende  Eigenschaft scheint auf den ersten Blick

ul#mainnavi a {display: block; }

zu sein - die wiederum benötige ich aber, damit die hover-Fläche korrekt dargestellt wird.

Ich kann mir noch vorstellen, daß durch das Javascript, das ja Knoten in den Elementbaum einhängt, der alte IE-Bug mit den Leerräumen/Abständen zum Tragen kommt, habe aber keine Idee, wie ich das abstellen könnte.

Habt Ihr Ideen, was ich noch versuchen könnte? (wenn jetzt wieder wahsaga in drei Minuten mit einer höchst trivialen Lösung ankommt, muß ich schreien ;-))

Danke fürs Draufschauen!

Gruß aus Köln-Ehrenfeld,

Elya

[Ashura]

Hallo Elya.

Im IE6 (die anderen lasse ich im Moment noch außen vor) "springt" das Menü beim hovern.

Hier wären Ansätze einer Programmiersprache in CSS nicht schlecht:

if (li:hover > ul) {  
  margin-bottom:-3px;  
}  
else {  
  margin-bottom:0;  
}

Hier könnte zwar :not() helfen, aber…

Ich bin daher auch an einer Lösung interessiert.

Einen schönen Montag noch.

Gruß, Ashura

[wahsaga]

hi Elya,

Ich kann mir noch vorstellen, daß durch das Javascript, das ja Knoten in den Elementbaum einhängt, der alte IE-Bug mit den Leerräumen/Abständen zum Tragen kommt

Wo hängt dieses Javascript neue Knoten in den Elementbaum ein?
Soweit ich das sehe, fügt es doch nur die Eventhandler für die LI hinzu, und ändert dann bei Aufruf derer die display-Eigenschaft der darin ggf. enthaltenen weiteren UL.
Ein Einfügen von Elementen sehe ich da nicht.

Die den Fehler auslösende  Eigenschaft scheint auf den ersten Blick
ul#mainnavi a {display: block; }
zu sein - die wiederum benötige ich aber, damit die hover-Fläche korrekt dargestellt wird.

Ich könnte mir u.U. vorstellen, dass der IE 6 display:block für die ULs nicht mag - und ggf. eher display:list-item haben möchte ...?

wenn jetzt wieder wahsaga in drei Minuten mit einer höchst trivialen Lösung ankommt, muß ich schreien ;-))

Ganz so schnell geht's nicht :-), weil ich derzeit nur einen IE 5.01 zur Hand habe, und der "springt" nicht.

Die Beschreibung von style.display in der MSDN besagt aber wohl, dass der IE 6 hier anders reagiert, als vorhergehende Versionen. Da wäre also, falls
UL.style.display = "list-item";
dieses Problem für den IE 6 löst, ggf. noch eine Browserweiche für 5er-IEs nötig.

gruß,
wahsaga

[Elya]

Hallo wahsaga,

Wo hängt dieses Javascript neue Knoten in den Elementbaum ein?

ja, da hast Du natürlich recht, Verständnisfehler meinerseits, die Knoten sind ja schon da.

Ganz so schnell geht's nicht :-), weil ich derzeit nur einen IE 5.01 zur Hand habe, und der "springt" nicht.

das ist ja schonmal etwas ;-)

falls UL.style.display = "list-item";
dieses Problem für den IE 6 löst, ggf. noch eine Browserweiche für 5er-IEs nötig.

Schöner Vorschlag, leider löst es das nicht... im CSS hatte ich list-item ausprobiert, ohne Effekt. Jetzt auch im JS, leider kein Unterschied. Die anderen Eigenschaften wie "inline-block", die ich mal versuchsweise eingesetzt habe tun's auch nicht. :-(

Danke Dir.

Gruß aus Köln-Ehrenfeld,

Elya

[Gernot Back]

Hallo Elya,

http://www.visuelya.de/selftest/test.html

Die den Fehler auslösende  Eigenschaft scheint auf den ersten Blick

ul#mainnavi a {display: block; }

Da die Li-Elternelemente deiner Links ja jeweils eine in Pixeln festgelegte Breite haben, könntest du deine A-Elemente innerhalb dieser ja auch mal mit 100% Breite oder dem Wert "inherit" bezogen auf dieses Elternelement floaten lassen.

Gruß Gernot

[Elya]

Hallo Gernot,

Danke für Deine Antwort!

http://www.visuelya.de/selftest/test.html

Da die Li-Elternelemente deiner Links ja jeweils eine in Pixeln festgelegte Breite haben, könntest du deine A-Elemente innerhalb dieser ja auch mal mit 100% Breite oder dem Wert "inherit" bezogen auf dieses Elternelement floaten lassen.

Das behebt zwas das Rumgehüpfe, führt aber zu einem anderen merkwürdigen Effekt: ein Abstand zwischen allen li der ersten und zweiten Ebene, *außer* dem ersten Element... eine negative margin an geeigneter Stelle bringt es auch garnicht, das zerschießt einiges. Ich muß da noch weitertesten, für weitere Ideen bin ich dankbar...

Vermutlich werde ich das Pferd mal von hinten aufzäumen und das Muster-Menü in meinen Code einbauen und dann Schritt für Schritt anpassen. Irgendwo muß der Fehler ja bei meinem zusätzlichen/modifizierten Code liegen.

Lieben Gruß,

Elya