[mrlumbergh]

Moin!

Ich habe jetzt das Forum durchsucht und keine Antwort gefunden...deshalb hier meine Frage:

Hat jemand schon mal dieses Problem gehabt: Ein Layer wird absolut positioniert, liegt aber unterhalb von "normalen" Elementen. Und zwar NUR im Firefox.
Safari und IE machen das richtig: Der Layer liegt ÜBER der Seite.

Wird der layer im Code UNTERHALB des Contents geschrieben, liegt er ÜBER der Seite. Auch im Firefox.
Aber da es sich um ein Menu handelt, ist es dort semantisch falsch.

Help, anyone?

[Kash]

code?

[mrlumbergh]

Achso. Es ist so:

Der Layer ist in nem Div "Header" verschachtelt. Sobald man ihn dort rausnimmt, ist er im Vordergrund, wie es sein soll.

Sowohl dann, wenn man ihn im Code über als auch unter den "Header" schreibt.

Wahrscheinlich lasse ich es so...aber interessant wäre doch zu erfahren, warum der Firefox dort so einen Quatsch macht.

[mrlumbergh]

Geht nicht:

<div id="wrapper">
<div id="header">
<ul id="mainNavCategories">HIER IS INHALT DRIN</ul>
</div>
</div>

Geht:

<div id="wrapper">
<div id="header">
</div>
<ul id="mainNavCategories">HIER IS INHALT DRIN</ul>
</div>


#wrapper {margin:0 auto 20px auto;width:988px;text-align:left;position:relative;}
#wrapper #header {overflow:hidden;width:988px;margin-bottom:10px;}
#mainNavCategories {position:absolute;left:0;top:150px;z-index:300;overflow:hidden;width:984px;height:300px;background:#CED6DD;}

[Account gelöscht]

Gib #header mal einen z-index, der größer als 300 (also größer als der von #mainNavCategories) ist.

[mrlumbergh]

Ich hol dieses Thema mal wieder hoch, weil ich gerade auf ein ähnliches Problem stoße und immernoch keine vernünftige Lösung habe.

Also: Mehrere Divs untereinander positioniert (zb. Mainnav, Subnav, Breadcrumb), und diesen Elementen jeweils ein overflow:hidden mitgibt, damit sie gerendert werden, weil man nen Border oder so haben möchte.

Dann in einem dieser Divs (zb. subnav) einen "Ausklapp"-Layer einbauen, der größer als das Div ist. Dieser wird absolut an einem li positioniert, da er immer an EXAKT dieser stelle erscheinen muss. Egal, ob der FF ohne Antialiasing oder der Safari es mit rendert.

Nun wird dieser Layer natürlich abgeschnitten. Ist ja klar: overflow:hidden.

Wie kann ich das umgehen?
Ich kann kein Float:left; nutzen, da die Kästen eine dynamische Breite hat und ich nicht weiß, wie lang sie gerade sind.
Overflow:hidden schneidet den Layer ab.
Gar keine Angabe - dann werden die Kästen nicht korrekt gerendert.

Beispielcode:

[mrlumbergh]

...vielleicht kann jemand den thread mal verschieben?

[Smooth-Graphics]