Z-index-Problem im Internet Explorer

Computer: Software & Programmierung HTML & CSS
#1

Hallo an alle hier im Forum,

ich hänge nun schon seit mehreren Tagen an einem Problem und hoffe nun hier einige Hilfe zu finden.
Ich arbeite zur Zeit an folgender Seite:
http://the-sandman.pytalhost.com/Diplom/
(sorry wegen der Werbung. Ist ein test-Server)

Dabei hab ich ein CSS-Menü mit Roll-Over-Effekt erstellt (lässt sich mit Pfeil oben links aufklappen). Jedoch habe ich mit dem Menü bzw. Untermenüs das Problem, dass es Im Internet Explorer (gestestet in IE6 bis IE8beta) an der DIV-Grenze abgeschnitten wird. Am besten sieht man es, wenn man mal selbst nachschaut. Ich denke sehr stark, dass es ein z-index-Problem ist, dass entweder ich nicht komplett korrekt implementiert habe oder aber der Internet Explorer nicht richtig darstellt.
Die Suchfunktion von vielen verschiedenen Foren und von Google habe ich bereits sehr strapaziert, jedoch noch keine brauchbare Lösung gefunden.

Ich hoffe, dass mir jemand etwas Hilfe oder einen Hinweis geben kann, wie ich das Darstellungsproblem beheben kann…

Die benutzte css-Datei ist folgende:
http://the-sandman.pytalhost.com/Diplom/themes/virtu…

LG
the-sandman

#2

Hallo the-sandman,

es ist absolut sinnlos, Elementen per CSS Z-Indizes zuzuweisen, die keine von static (Defaultwert bei allen Elementen) abweichende Position-Eigenschaft haben. Wenn du das nachholst, ist darüber hinaus ist dann auch noch der Stapel-Kontext der Vorfahrenselemente zu beachten

https://developer.mozilla.org/en/Understanding_CSS_z…

Gruß Gernot

#3

Hallo Gernot,

vielen Dank für die schnelle Antwort. Es war bis jetzt auch die kompetenteste Antwort, die ich im Internet bekommen habe.

Ich habe nun etwas mit den Positionen experimentiert, konnte jedoch noch keine Erfolge erzielen. In der css-Datei http://the-sandman.pytalhost.com/Diplom/themes/virtu… denke ich, dass die Zeilen 102 und folgende, die ausschlaggebenden sind, weiß jedoch nicht mehr, was ich noch probieren kann.

Es wäre schön noch ein wenig Hilfe zu bekommen. Vielleicht seh ich auch den Wald vor lauter Bäumen nicht mehr.

LG
the-sandman

#4

Hallo the-sandman,

denke ich, dass die Zeilen 102 und folgende, die
ausschlaggebenden sind, weiß jedoch nicht mehr, was ich noch
probieren kann.

div#leftbar div div div li ul {display:none; position:absolute; left:100px; top:-2px; /* set up the overlap (minus the overrun) */ /* set up the overrun area */ /* this is for IE to make it interpret the overrrun padding */ background-color:#dddddd; z-index:19;}
/* for browsers that understand this is all you need for the flyouts */
div#leftbar div div div li:hover > ul {display:block;}

Ja, diese Zeilen habe ich auch schwer im Verdacht, denn der IE versteht den Kindselektor ja überhaupt erst seit Version 7.
http://www.css4you.de/wscss/css04.html#childselector

Außerdem erinnere ich mich, dass der IE (möglicherweise der IE7 auch immer noch) bei dem Element, das die Pseudoklasse :hover bekommt auch irgendeine Veränderung (und sei es nur, dass du die Schriftfarbe von „black“ auf „#000“ umstellst, was ja dann eigentlich gar keine Veränderung ist) als Trigger braucht, damit sich auch bei den enthaltenen Kind- bzw. Nachfahrenselementen etwas bewegt.

Für ältere IEs (und der IE6 ist ja durchaus noch weit verbreitete) kannst du sowieso allenfalls mit dem Nachfahrensselektor (Leerzeichen) und nicht mit dem Kindselektor (&gt:wink: arbeiten. Das heißt aber, dass du wenn du nicht gleich alle Listen noch niedrigerer Ordnung mit einblenden willst, du das Einblenden für diese wieder aufheben und dann auch das Aufheben deren Einblendens bei Hover des enthaltenen Listenelements wieder aufheben musst usw., usf.

Das kann bei sehr vielen verschachtelten Unter-Unter-Unter-Listen sehr viel Schreibarbeit werden. Ich würde daher hier statt mit CSS-Hover mit JavaScript OnMouseover/OnMouseout arbeiten. Wenn du das in expression() oder behavior packst, kannst du sogar nur für den IE ein CSS-Hovern mit JS nachbauen, ohne dass vernünftige Browser davon mitbetroffen werden.

Vor einem knappen Jahr habe ich schon einmal demonstriert, wie so etwas mit expression()
/t/brauche-hilfe-bei-css/4364397/19
bzw. behavior
/t/brauche-hilfe-bei-css/4364397/21
geht.

Gruß Gernot

#5

Hallo Gernot

also mit dem Ein- und Ausblenden der Untermenüs hatte ich bis jetzt in keinem der getesteten Browser (Opera 9.6, Firefox 3.0 Interet Explorer >= 6.0) keine Probleme. Das einzige, woran es nun wirklich noch hängt ist, dass das Menü in den Internet Explorern an der DIV-Grenze abgeschnitten wird.
Testweise hatte ich auch schon das Toolbox-JS von http://www.walterzorn.de/tooltip/tooltip.htm getestet und die Überlagerung hat damit auchz funktioniert. Das Script macht jedoch auch nicht mehr, als ein paar css-Werte zu setzen.

Mein Anspruch war bis jetzt noch, dieses Problem erst einmal ohne den Einsatz von JS zu lösen, aber ich tendiere mehr und mehr für den Einsatz.

Vielen Dank für die bisherige Hilfe. Sollten noch weitere Hinweise kommen, wäre ich dankbar. Ich werde dann demnächst auch einmal eine Lösung mit JavaScript in Angriff nehmen…

LG und schönes Wochenende
the-sandman

#6

Hallo,

das Problem tritt bei mir mit FF 3.0.4 auf (WIN XP). Der Pfeil ist knapp sichtbar, kann gerade noch angeklickt werden.

Gruß
Der Franke

#7

Hallo the-sandman,

ich glaube, ich habe die Lösung für dein Problem nun gefunden, da jemand in einem befreundeten Forum gerade ein ganz ähnliches Problem schildert:

http://forum.de.selfhtml.org/?t=179790&m=1186958

Einfach dem IE ein weiteres verschachteltes Kind-Element gönnen: Absolute Positionierung und filter:Alpha() vertragen sich in diesem Browser einfach anscheinend nicht und beschneiden ihre Nachfahren, wenn sie sich auf ein und dasselbe Vorfahrenselement beziehen. Damit die enthaltenen Nachfahrenselemente auch bei dieser Entkopplung zwischen absoluter Positionierung und Transparenz durch die Vorfahrenselemente nicht abgeschnitten werden, verpass den Nachfahren relative Positionierung und, damit dann auch die Transparenz des Elternelements nachgeahmt wird, auch noch einmal zusätzlich den Alpha-Filter bei jedem enthaltenen Element. Vergleiche hierzu auch folgenden Blog-Artikel:

http://acidmartin.wordpress.com/2008/09/11/overridin…

Gruß Gernot

#8

Hallo Gernot,

vielen Dank für diesen Hinweis. Genau dieser dieser Kombination liegt der Fehler. Nehme ich den filter:alpha raus, funktioniert die ganze Überlagerung wieder.
Ohne Ihre Hilfe wäre ich wahrscheinlich nie darauf gekommen.

Eine Kombination aus einem relatib-positionierten Nachfahren-Element hat bis jetzt leider noch nicht funktioniert, aber ich werde weiter daran arbeiten.
Notfalls werde ich den Transparent-Effekt im Internet Explorer einfach weglassen…

Liebe Grüße
the-sandman

#9

Hallo Franke,

vielen Dank für den Hinweis. Ich habe soeben auf die Version 3.0.4 des Firefox aktualisiert (ebenfalls WinXP). Den Fehler des IE konnte ich hier jedoch nicht erkennen.
Es gibt jedoch eine andere Form der fehlerhaften Überlagerung. Hier weiß ich jedoch, dass es auf die position:relative zurückzuführen ist und werde mich auch darum kümmern…

LG
the-sandman

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]