MS IE: Rand unter Bild <div><img></div> trotz Tricks

[wiberg]

Im Ms Internet Explorer habe ich einen ca. 3px großen Rand unter einem Bild. In Mozilla funktioniert's einwandfrei. Die zugegebener Maßen etwas seltsame Konstruktion ist nötig, weil zwei verschiedene Hintergrundbilder verwendet werden. Das Problem tritt nur bei dem Bild "c3_shadow_top.png" auf. Hier ist der Code:

<div style="position:absolute; left:242px; top:96px; width:485px; background-image:url('img/c3_borders.png'); background-repeat:repeat-y; line-height:0;">
 <img src="img/c3_shadow_top.png" alt=" " style="vertical-align:top;" />
 <div style="width:475px; margin-left:1px; margin-top:0; background-image:url('img/c3_bg.png'); background-repeat:repeat-x; line-height:13px;">
Blindtext
 </div>
 <img src="img/c3_shadow_bottom.png" alt=" " style="vertical-align:bottom;" />
</div>

Ich habe Zeilenumbrüche schon weggemacht, das hat nichts geändert. Ferner schon ziemlich viele CSS-Eigenschaften wie "margin", "padding", "height" usw. überall, wo es sinnvoll erschien, ausprobiert. Vielleicht fällt jemandem etwas ein, zur Not auch, etwas umzustellen.

Gruß und Dank
Wiberg

[mdkiller]

Hi!

Versuch mal, alle Whitespaces zu löschen, also die Tags direkt hintereinander zu schreiben. Das könnte schon helfen.

Gruß

md

[wiberg]

Hab ich schon versucht. Danke, das Problem scheint aber irgendwie etwas schwieriger zu sein.

[Utz]

Hallo,

welche Höhe hat c3_shadow_top.png? Mehr oder weniger als 13px? Davon abgesehen: schon versucht, width und height für das Bild zu setzen?

Grüße,

Utz

[wiberg]

Hallo,

welche Höhe hat c3_shadow_top.png? Mehr oder weniger als 13px? Davon abgesehen: schon versucht, width und height für das Bild zu setzen?

Grüße,

Utz

(c3_shadow_top.png) Breite:485px, Höhe:9px. Also weniger als 13px. Die line-height-Angabe 13px gilt aber nur für den <div>-Bereich NACH dem Bild, falls deine Frage damit zu tun hatte.
Und: Ja, das habe ich erfolglos ausprobiert..

[wiberg]

Gerade habe ich noch etwas ausprobiert, was zur Lösung beitragen könnte: Ich habe die Höhe des Bildes auf 13px gesetzt, woraufhin der Rand tatsächlich verschwand (oder vom nächsten <div> verdeckt wurde). Offenbar ist die Zeilenhöhe immnernoch 13px, obwohl ich sie im ersten <div> auf 0 gesetzt habe (ich habe auch 1px ausprobiert). Das ist doch irgendwie seltsam!
Jedenfalls ist der Rand dann weg, dafür das Bild aber fast doppelt langgestreckt. Wem etwas einfällt, ich bin für alles offen.

Gruß und Dank,
wiberg

[Utz]

Hallo,

Offenbar ist die Zeilenhöhe immnernoch 13px, obwohl ich sie im ersten <div> auf 0 gesetzt habe (ich habe auch 1px ausprobiert).

Eigentlich ist das nicht seltsam. Stell's Dir folgendermaßen vor:
Du hast Absatz 1, der enthält ein Bild (Höhe 9px) und Absatz 2 (Höhe 13px). Absatz 1 soll Höhe 0px haben. Was tust Du als Browser?

Entweder Du sagtst, ok, er will 0px Höhe haben, dann kriegt er die auch, nicht mein Problem, wenn er dann weder das Bild noch Absatz 2 sieht.

Oder Du sagst: Na ja, Höhe 0px, Höhe 9px, Höhe 13px, der weiß nicht, was er will - machen wir's so, dass alles zu sehen ist, also: Höhe 13px.

Was Du vom Browser erwartest ist aber: Aha, hier haben wir ein Text-Div mit 13px und ein Bild mit 9px, drum rum ein Div mit 0px, das kann ja nur heißen, dass er die Höhe im Text-Div nicht so ernst nimmt und die Höhe des Bildes haben will. Kurz: Du erwartest den Gedankenleser-Browser :-)

Grüße,

Utz