Ich habe letztens eine kleine Homepage für einen Kumpel gebastelt. Genauer genommen für seine Hiphop-crew. Um mich selbst ein wenig fortzubilden und auch mal etwas neues zu wagen habe ich mich entschieden ein Mouseover Menü zu basteln, welches das Untermenü anzeigt, sobald die Maus auf den Obermenüpunkt kommt.
Den Code habe ich mir -zugegeben- einigermassen zusammenkopiert, habe aber verstanden wie er funktioniert und konnte ihn damit auch an meine Bedürfnisse anpassen (war also einfach zu faul die syntaxes auswendig zu lernen ).
Klappt alles wunderbar, bis ich mal zum testen den IE zur Hand ziehe.
Sobald die Maus das Obermenü verlässt und ins ausgeklappte Untermenü geht, verschwindet dieses wieder, weil die Maus nicht mehr auf dem Obermenü ist. -.-
Das klicken von Links im Untermenü wird somit unmöglich…
Ich weiss noch, dass ich ziemlich stolz war, als ich es geschafft habe, dass das in FF klappt.
Ist das einer dieser berühmten “IE ist veraltet und der blanke Webdesigner-horror”-Momente?
Vorsichtshalber mal all die Fehler beseitigen, die der Validator findet.
CSS-Eigenschaften vom style-Attribut ins style-Element verlegen.
Für Testzwecke eine minimale Dokument erstellen, welches nicht mehr
enthält, als für das Erscheinen des Problems notwendig ist - erleichtert die Lokalisierung des
Problems für andere.
Testweise um die betreffenden Elemenete einen Rahmen legen (border, outline), dann sieht
man besser, was wohin gehört, insbesondere geheimnisvolle Abstände.
Ich würde ja vermuten, daß es da durch die Kombination von Positionierung und Abständen
eine Lücke zwischen der Überschrift und dem Rest gibt. Sobald die Maus über der Lücke ist,
gilt :hover natürlich nicht mehr. Das darf also keinesfalls passieren.
:hover selbst ist leider nicht sehr präzise definiert, weswegen es da von browser zu browser
schon Unterschiede geben kann, ob und wie das interpretiert wird, das kann bei kritischen
Konstruktionen dann schon einen Unterschied machen …
Danke vielmals für die Tipps!
Nach einigem herumpröbeln hat sich herausgestellt, dass der IE einfach nicht damit klar kam, dass das grosse Logo mit den Div-boxen überlappte, selbst wenn diese einen höhreren Z-Index hatten. Ich hab lang und breit probiert, aber habs nicht gebacken gekriegt, dass er kapiert, dass das Menü über der Grafik liegt. Daher hab ich mich zu einem uralten, simplen Trick entschlossen: Ich hab die Grafik einfach in den Seitenhintergrund genommen. ^^
@unive: Dass der IE nur direkt über dem Text reagiert ist mir auch aufgefallen, stört mich in diesem Fall aber eigentlich gar nicht. Dennoch werde ich mir den Tipp merken (man kann nie genug Tricks auf Lager haben ), also auch dir vielen Dank!
).