Hi,
<li id=\"karriere1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_1\" class=\"hackbox\"><label class=\"e1\" for=\"navi_1_1\"><label class="\karriere\"> </label></label>
Hoppla... Hatte ich dieses verschachtelte label übersehen? Das sollte natürlich nicht passieren. Und ist insbesondere natürlich semantischer Humbug ;)
Nein, nein, das ist von mir... ohne hat das mit dem Grafik-Hovern ursprünglich nicht funktioniert.
Da das erste (dein! ;) ) LABEL die Klasse "e1" hatte, die für ALLE Menüeinträge gleich waren, konnte ich da natürlich keine individuelle Grafik einbauen. Also habe ich für jeden Menüeintrag der Hauptmenüebene, die eben mit Grafiken gestaltet werden, noch ein "inneres" Element gebraucht, dass ich individuell HOVERn konnte. Erst waren das DIVs, aber da hat der Validator gemeckert, als ich die DIVs in LABELs umbenannt habe, ging es.
(Daß zwei Klassen in einem ELEMENT gehen, erfahre ich jetzt von dir als Neuigkeit...)
Aber: daran liegts ja nicht. Da die Klasse "e1" ja im Grunde überflüssig war, da sie nichts formatiert hat, habe ich die Klasse des "verschachtelten inneren LABELs" einfach in das "äußere" Label übernommen, die Klasse "e1" damit ersetzt - und das innenliegende LABEL dann entfernt.
Mit dem Ergebnis, daß die Grafik nicht mehr HOVERt.
Vom Gefühl (!) her war es mit den verschachtelten LABELs wohl so, daß der HOVER-Befehl der ID das äußere LABEL schwarz HOVERt und danach das innere LABEL die Grafik HOVERt...
...jetzt mit nur einem LABEL schlägt wohl die ID-Hoverung die LABEL-HOVERUNG, legt sich also drüber.
(deshalb hab ich ursprünglich wohl auch das zweite LABEL eingebaut, weil ich nur mit dessen Existenz die Grafik Hovern konnte).
Wenn ich das HOVERing der ID entferne, dann sieht man, wie die Grafik des LABELs schön hovert, aber da das LI mit dieser ID nun nicht mehr hovert, sieht es im Ergebnis auf der Seite doof aus.
Einfachste Lösung (für die Optik) ist wohl, wenn ich die Schrift der Grafik nicht transparent gestalte, sondern die Grafik so groß wie das gesamte Anzeigefeld gestalte und nur noch die Grafik HOVERn lasse, aber das löst ja nicht das prinzipielle Problem, daß technisch irgendwo ein Fehler drin ist...
Da das verschachtelte LABEL aber dazu führt, dass im IE das Ausklappmenü nicht funktioniert, kann ich das nicht mehr nehmen... aber wie bekomme ich mein Menü jetzt wieder dazu, beim HOVER die Grafik anzuzeigen und nicht komplett schwarz zu werden?
Hm, vielleicht indem du den vorhandenen labels den Befehl zum hovern gibst? ;)
Hab ich doch. Siehe oben. Da sowohl die "umgebende" ID schwarz hovert, als auch die "innenliegende" Klasse, also beide gleichzeitig, scheint es mir, dass zuerst die Grafik gehovert wird - und dann die ID... die von der Anzeigenreihenfolge die Grafik schlägt, sich darüber legt.
Ich blick da grad net 100% durch in deinem Quellcode, aber wenns um die Klasse .karriere geht, die du beim Entfernen der Verschachtelung verlierst, die kann problemlos dem vorhandenen label beigefügt werden. Es ist nicht umsonst möglich, Elementen mehrere Klassen zu geben. In deinem Fall dann
<li id="karriere1"><input type="radio" name="navi_1" id="navi_1_1" class="hackbox"><label class="e1 karriere" for="navi_1_1"> </label>
Hab ich ja indirekt schon gemacht, indem ich die überflüssige, weil eigentlich nichts enthaltene Klasse .e1 entfernt und durch .karriere ersetzt habe... mit dem oben beschriebenen Effekt:
IE klappt jetzt schön die Menüs auf, das HOVERn der Grafik klappt aber bei keinem Browser mehr...
Irgendwie ist das alles komisch...
Gruß
JPL
(der auf der Arbeit ist und sich nicht einloggen kann)