IE6 problem mit bild, das aus div container "herausragt" ("left:-100px")

[Not so much B]

Hallo zusammen,

ich hab ein Problem mit einer Website:

http://bkhoesie.de/contenido/cms/front_content.php?idart=155

Es gibt dort die beiden div Blöcke #navart (Navigation mit Artikel Liste) und #content mit den Styles "float:left" und "float:right". Die Breiten ergänzen sich zur Breite des übergeordneten #container divs.

Bei Klick auf das Bild (Zeitungartikel) im #content wird per JS eine größere (lesbare) Version geladen. In diesem Fall muss das Bild größer als der #content div sein. Also fügt das Script noch den Style "left:-100px" bzw einen passenden negativen Wert für das Bild dem <img> tag hinzu ("position:relative").

Bei FF, Opera und NS ragt nun das Bild einfach in die Navigationsleiste links rein. So soll es sein.
Nur der IE6 vergrößert den #content div, obwohl das Bild ja nach links verschoben ist. Die Folge ist, dass der #content div unter den #artnav fließt und das Layout gesprengt ist.

Wie könnte ich die gewünschte Anzeige dem IE6 beigringen. (IE7 hab ich noch nicht ausprobiert).

Beste Grüße,
B

 

[hela]

Hallo und willkommen,

die Ursache für die unerwünschte Darstellung im IE6 ist dir vermutlich klar. Zitat http://www.css4you.de/overflow.html:

Bemerkung: Bei visible vergrößert der IE das übergeordnete Element, bis der Inhalt passt.

Gemeint ist hierbei der IE6, der IE7 stellt diese Seite richtig dar.
Du hättest nun noch die Möglichkeit mit absoluter Positionierung das Bild aus dem normalen Fluss herauszunehmen. Allerdings musst du dann per Script den umgebenden DIV-Block mit der Bildhöhe versorgen, da er sonst zusammenklappt wegen Mangel an Inhalt. Meiner Meinung nach wäre es einfacher, wenn du das größere Bild in einem separaten Fenster darstellst...