Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>CSS Aufklappmenü funktioniert nicht richtig im IE8 und 9

CSS Aufklappmenü funktioniert nicht richtig im IE8 und 9

dom_beta26.09.1222:59
Hallo,

ich habe ein Aufklappmenü mit CSS erstellt, allerdings funktioniert dies im IE 8 und 9 nicht richtig.

Wenn man über den obersten Punkt geht, öffnet sich das Menü, allerdings wenn man dann nach unten geht, klappt das Menü einfach zu.

Kennt ihr einen Fix?
„...“
0

Kommentare

dom_beta26.09.1223:55
Hallo,

ich habe offenbar das Problem gelöst.

Der IE benötigt offenbar für das Untermenü eine Hintergrundfarbe. Wenn keine gesetzt ist, verschwindet das Menü; setzt man eine, funktioniert es.

Total bekloppt.
„...“
0
dom_beta02.11.1214:07
Hallo,

ich habe die Ursache gefunden.

Es liegt daran, wenn Text hinter dem Aufklappmenü ist. Nur wie kann man das Problem jetzt elegant lösen?
„...“
0
Krypton02.11.1214:49
Wie bei allen anderen HTML & CSS Fragen, kann auch hier ohne Beispielcode oder eine Beispielseite keiner wirklich helfen. Du könntest es mit den luftigen Fragen bei einer Wahrsagerin versuchen, vielleicht kann sie das Problem auch so einkreisen.
0
dom_beta02.11.1214:59
Hallo,

der Code ist hier:



Ich habe mich mal ein wenig im Web umgesehen und habe gelesen, dass wohl ältere Firefox Versionen ( ) ebenfalls ein Problem damit hatten und dies wohl irgendwas mit dem Z-Index zu tun haben soll.

Aber ich kann doch den CSS Code nicht mit Z-Indexes zu ballern oder?

Hier wird für :hover ul ein Z-Index von 500 vorgeschlagen:
http://www.silent-fran.de/css/tutorial/aufklappmenue.html
„...“
0
Krypton02.11.1215:41
Ich bin leider schon etwas aus der Übung, was die alten Browser angeht, aber ein beliebter Fix für solche Sachen bestand früher aus einem transparenten gif, welches in den Hintergrund geladen wurde.

Im CSS müsstest du folgende Zeile für das #NavOben li ul hinzufügen

#NavOben li ul {
background-image:url(pixel.gif)}

wobei das »pixel.gif« natürlich noch am entsprechenden Pfad liegen muss.

Die Erhöhung des Z-Index bringt hier nichts, da ja nix über dem Menü liegt. Der IE interpretiert einen leeren oder transparenten container eben nicht mehr als hover-Ziel und blendet das Menü daher genau so aus, als wenn die Maus die Menüfläche komplett verlassen hätte.
0
dom_beta02.11.1216:08
Was heißt hier alter Browser?

Es handelt sich um den Internet Explorer Version 9.

Krypton
Die Erhöhung des Z-Index bringt hier nichts, da ja nix über dem Menü liegt. Der IE interpretiert einen leeren oder transparenten container eben nicht mehr als hover-Ziel

soweit ich das sehen kann, blendet der IE das Menü auch dann aus, wenn sich hier dem Menü Text, Bilder oder sonstiges verbirgt.
„...“
0
Krypton02.11.1216:23
Ich hab’s hier nur im IE 8 und FF 3.6 unter Windows getestet und die Lösung mit dem transparenten GIF funktioniert in beiden. Im IE 9 und FF3.6 sollte auch noch:

background-color: rgba(0,0,0,0) funktionieren. Das erstellt einen schwarzen Hintergrund mit 0 Deckkraft (ist also auch transparent). Der Trick funktioniert aber nicht im IE 8 und früher, da diese kein rgba (rot, grün, blau, alpha-Transparenz bzw. Deckkraft) beherrschen.
0
dom_beta02.11.1217:06
Krypton
background-color: rgba(0,0,0,0) funktionieren

tatsächlich.
„...“
0
dom_beta02.11.1217:31
Hallo,

ich bin mir übrigen nicht ganz sicher, ich meine, es liegt trotzdem am Z-Index.

Denn bei dem eingebundenen Flash-Video wurde das Menü auch verschluckt (Firefox 16, Safari 5).
Gelöst hatte ich es da, als ich den Z-Index vom Video auf -1 geändert habe.

Hat da noch jemand ne Idee?!
„...“
0
Krypton03.11.1207:04
dom_beta
ich bin mir übrigen nicht ganz sicher, ich meine, es liegt trotzdem am Z-Index.

Da hast du es ja recht einfach, probier’ es einfach aus. Bei mir haben auch utopische z-Indizes nichts gebracht, da ja eben (auf den normalen Seiten) nichts über dem Menü liegt. Das Problem lieg darin, dass der IE bei nicht sichtbaren Elementen auch kein hover-Ziel hat. Er ignoriert dass, wenn unter dem DIV nichts weiter ist, beachtet es aber, wenn darunter Text oder Bild ist.

Würde ein Element darüber liegen, könnte die Hintergrundfarbe oder das (transparente oder deckende) Hintergrundbild nichts daran ändern, da das störende Element ja noch immer vor dem Menü liegen würde – was es aber nicht tut.

Das Beispiel mit dem z-index von 500 soll nur sicherstellen, dass das Menü immer vor dem inhalt liegt, auch wenn man hier verschiedene Elemente mit mehreren z-index Ebenen stapelt. Es ist also eine reine Vorsichtsmaßnahme, keine Lösung für das IE Problem.
dom_beta
Denn bei dem eingebundenen Flash-Video wurde das Menü auch verschluckt (Firefox 16, Safari 5).
Gelöst hatte ich es da, als ich den Z-Index vom Video auf -1 geändert habe.

Du hättest statt dessen auch den z-index des Menüs erhöhen und den z-index des nachfolgenden Inhalts mit einem niedrigeren Wert versehen können:

#NavObenG {z-index:3}

#content {z-index:1; position:relative}

#NavUnten {z-index:2}

Damit liegt der »navObenG« Block immer über den anderen beiden Blöcken. Die Navigation (oben und unten) bildet jeweils durch die fixe Position einen eigenen »Stapel Kontext«, also einen Container, der komplett über oder unter die anderen Container gestapelt werden kann. Gibtst du dem #content noch ein »position:relative« mit, bildet auch dieser einen Stapel-Kontext. Der Inhalt im content kann danach mit den z-index-Werten nur noch innerhalb des Contents über oder unter andere Elemente gelegt werden, er kommt aber nicht mehr über ein element außerhalb dieses containers (Nav oben und unten), welches einen höheren z-index hat. (Hilft aber dem Menü nicht wirklich).
0
dom_beta03.11.1214:43
Krypton, funktioniert dieses Beispiel in deinem IE 8?

http://stackoverflow.com/questions/10131959/css-drop-down-menu-not-working-in-ie8



Dabei fällt mir ein, siehst du da einen Unterschied zwischen diesem und meinem Code?
„...“
0
Krypton03.11.1216:46
dom_beta
funktioniert dieses Beispiel in deinem IE 8?

Dieses Beispiel funktioniert mit dem korrigierten CSS im IE 8.
Dabei fällt mir ein, siehst du da einen Unterschied zwischen diesem und meinem Code?

Du hast einen margin um deine Buttons, welche einen für den IE leeren Bereich darstellen, der oben verlinkte Code hat keinen margin. Fügt man diesen hinzu und schafft auch in diesem Beispiel die leeren Flächen im Menü, funktioniert auch dieses nicht mehr im IE.

Eine Google Suche nach »ie8 hover over transparent div« bringt auch mehrere Beispiele, die als Lösung für den alten IE ein transparentes Bild im Hintergrund vorschlagen. Kann natürlich auch ein transparentes PNG sein, falls du GIF nicht magst.
0
dom_beta03.11.1220:07
Hallo,

also, mit dem Programm IETester von CoreServices (Windows) funktioniert diese Navigation problemlos.



Krypton, funktioniert dies denn in deinem IE 8?

Übrigens, obiges funktioniert ebenfalls problemlos mit Firefox, Safari, Opera.
„...“
0
Krypton03.11.1220:27
Bis jetzt funktioniert sie auch im IE 8, aber das Beispiel hat noch keinen Content unterhalb der Navigation. Zudem führt die Art der Positionierung dazu, dass bei kleinen Browserfenstern die Navigation so aus dem sichtbaren Bereich geschoben wird, dass sie auch via Scrollbar nicht mehr erreichbar ist.

Da scheint die Lösung mit dem GIF doch die bessere Lösung zu sein, zumal sie ja völlig Standard-Konform ist. Der aktuelle Code ist zudem mit Fehlern übersäht.
0
dom_beta03.11.1223:34
Also, eine neuere Überprüfung durch den HTML- und CSS-Validators von W3C ergab keine Fehler.
„...“
0
Krypton04.11.1203:19
dom_beta
Also, eine neuere Überprüfung durch den HTML- und CSS-Validators von W3C ergab keine Fehler.

Jepp, die Code-Fehler sind behoben. Das Menü funktioniert mit diesem CSS auch im IE 8, sobald du die einzelnen <li> Elemente mit einem »margin« auseinander ziehst, verhält es sich wie das aktuelle Menü. Nimmst du aus dem aktuellen Menü die Abstände zwischen den Win95-Buttons raus, funktioniert auch dieses.

Am Problem hat sich also nichts geändert. Wenn du einen Freiraum zwischen den Elementen haben möchtest, brauchst du beim IE 8 einen Hintergrund. Sei es nun eine Farbe oder ein (transparentes) Bild.
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.