IE und der Z-Index mit position:relative Bug

[Passi077]

Hi,

ich will eine kleine Übersicht erstellen, die Kurzinformationen über Produkte enthält. Wenn man mit der Maus über ein Produkt fährt, soll eine Box mit mehr Informationen über dieses Produkt erscheinen.

Das Ganze nur mit CSS. Habe also was gebaut, und es funktioniert perfekt - bis auf im IE. Der hat nämlich ein bekanntes Problem, wenn man den Z-Index mit relativ positionierten Elementen benutzt. Dann leert er nämlich den Z-Index-Stack und fängt quasi von vorne an, was allerdings einfach falsch ist und nicht den CSS Normen entspricht. So habe ich das jedenfalls nach erfolgreichem Googlen verstanden.

Leider gibt es nirgends eine Lösung für das Problem.
Jetzt wollte ich Euch mal fragen, ob Ihr noch eine Idee habt, wie man das Problem lösen könnte?

Habe dazu die Seite mal hochgeladen:
www.mathrix.net/problem/problem.html

Wie gesagt - funktioniert in jedem Browser bis auf den IE, dort wird die ausgeklappte Box fälschlicherweise hinter den anderen, unausgeklappten Boxen angezeigt.

Wäre super, wenn Ihr eine Idee habt..

Viele Grüße
Pascal

PS: Wichtige CodeStellen: im CSS Zeile 319 (.product_box) folgende.
.product_box p ist die ausgeklappte Box.

 

[prm]

Ohne Prüfung:
Versuch mal, ob die blauen IE-Hacks in diesem Code was nützen. Sollte von der Problembeschreibung her passen:
Bildergalerie mit Vergößerungseffekt

 

[neuroleptika]

Und wenn du position:relative erst beim hovern von .product_box setzt?

.product_box:hover {
position: relative;
}

Da muß man mit der Maus eh rauf um auf .product_box p zu kommen.

Die .product_box darunter hätte position:static und sollte unter der ausgeklappten .product_box p verschwinden.

Die Anleitung von prm solltest du dir dennoch ansehen.
Er hat :hover nur für <a> eingesetzt und braucht deshalb kein Script für IE6.
<p> kannst du dann aber nicht mehr verwenden. (nur inline-Elemente sind möglich)

 

[Passi077]

Hi,

super vielen Dank für Eure Antworten :) !

Problem gelöst!

Viele Grüße
Pascal