z-index - Problem beim IE7

[Marcell]

Liebe CONTAO-Freunde,

Ich hänge mal wieder an einem typischen IE-Problem. Diesmal habe ich das Problem, daß ich trotz Entwicklertools (F12) im IE7 ein Darstellungsproblem nicht gelöst bekomme. Meine Bilder (IMG-Tag) werden immer in der obersten Ebene dargestellt. Dadurch kann meine Navigationsliste (li) gar nicht bei Start und teilweise bei Folgeseiten erreicht werden oder ist sichtbar.

Beispielseite:

http://www.pandamed.de/index.php/Friedrich.html

Vielleicht sieht ja jemand meinen Fehler oder hat einen entsprechenden Lösungansatz. Danke.

[Silvano]

Hallo Marcell

schau Dir mal diesen SELFHTML Eintrag an.

Gruss Silvano

[xmoto]

Hallo Marcell.

Wir hatten auch das Problem.
Die Lösung die bei uns funktionierte war aus dem Forum:

#header .inside {
z-index: 999;
}


Tom

[wotank]

Vielleicht sieht ja jemand meinen Fehler oder hat einen entsprechenden Lösungansatz. Danke.

warum wurde .mod_navigation absolut positioniert und warum hat es eine Höhe von 300px; ?? Das ist sicher nicht sinnvoll.
Warum wird die Subliste mit display:none; ausgeblendet? Die Screenreader lesen diese Elemente dann nicht mehr vor.
Besser ist es die absolute Subliste mit left:-9999px auszublenden und beim Hovern mit left:auto; wieder einzublenden.

Hier ist ein Beispiel für eine ganz normale Dropdownnavi.

Du hast da relativ wild rumpositioniert und teilweise wirkungslose z-index verteilt. z-index wirkt nur bei Elementen die ungleich position:static (default) sind.

Ich würde erst mal allen Elementen die nach der topnavi kommen soweit HasLayout verleihen.
#main hat z.B. keins, warum erschließt sich mir nicht, zumal das umschließenden Element sowieso schon eine feste Breite hat.
Dann würde ich die ganzen überflüssigen Positionierungen entfernen, z.B. haben alle div.inside position:relative;, was überflüssig bis kontraproduktiv ist.
Beim IE7 tauchen sehr oft Probleme mit einem relativ positionierten Element auf was kein HasLayout hat.

[Marcell]

*/ gelöst */

Danke an Tom. Problem habe ich dadurch eleminiert. Der anderen Sache mit der relativen Positionierung werde ich nachgehen. Die ganze Sache muß auch noch auf W3C geprüft werden und da werde ich dann wohl auch noch die Sache mit der Positionierung berücksichtigen. Ich denke die Positionierung sollte ich nochmals überprüfen und den Einwand mit dem haslayout prüfen. Schließlich lernt man nicht aus und warum soll man Navi-Tutorials übernehmen, wenn man nicht zu 100 % weiß was da eigentlich passiert.

Danke an allen. Es wird sicherlich vielen helfen.

[wotank]

Ich denke die Positionierung sollte ich nochmals überprüfen und den Einwand mit dem haslayout prüfen. Schließlich lernt man nicht aus und warum soll man Navi-Tutorials übernehmen, wenn man nicht zu 100 % weiß was da eigentlich passiert.

Ein Element bekommt im IE 7 z.B. durch die Vergabe einer Breite oder Höhe HasLayout verliehen.
Das reicht es aus, per Conditional Comment eine Mindesthöhe zu definieren:

*+html #element  {
    min-height:0;
} 

Nach *+html lesen nur der IE 5 und IE 7 weiter.
Der IE 5 ist uninteressant geworden, weshalb das so okay ist.

Viel wichtiger wäre es imho dich mit der Stapelreihenfolge zu befassen. Dein wildes rumpositionieren läßt eher auf eine trial/error-Methode schließen.

Schau dir das mal an.
Das ist eine einfache Erklärung.
Der Sonderfall IE6/7 ist da weggelassen, die haben nämlich einen Stapelfehler.
Wenn du das was dort steht verstanden hast, wirst du in 99% der Fälle keine Probleme mehr mit einer falschen Stapelreihenfolge haben.

[lucina]

(...)
Das reicht es aus, per Conditional Comment eine Mindesthöhe zu definieren:

*+html #element  {
    min-height:0;
} 

(...)

Entweder per Conditional Comment oder via StarPlus-Hack - beides braucht man nun nicht zu benutzen ...

Carolina.

[wotank]

Entweder per Conditional Comment oder via StarPlus-Hack - beides braucht man nun nicht zu benutzen ...

ups, meine Aussage war nicht ausführlich genug.
Ich gehe immer wie selbstverständlich davon aus, das man nur eine ie.css benutzt und innerhalb dieser Datei nach IE-Version unterscheidet.

Deshalb werden dort den IE7-spezifischen Anweisungen entweder mit *+html ( lesen IE5/7) oder *:first-child+html (liest nur der IE7) hinterlegt.