nicht angemeldet
Erneutes Problem mit IE5+6 Bug
Hallo an alle,
bei untenstehendem Code entsteht im IE 5 ein Problem: Ich möchte in einen Div mit fester Breite ein Bild einfügen und unter das Bild einen Text. Wenn ich das mache entsteht im IE5+6 ein unterer Abstand zwischen dem Bild und dem Text von 3px, der im Netscape nicht vorhanden ist.
Gebe ich nun dem Bild die Eigenschaft float: left; mit, ist das Problem im IE6 behoben. Allerdings fügt der IE5 dann einen linken Rand von 3px Breite ein. Es ist echt zum verrückt werden.
Kann mir da vielleicht jemand einen Tip geben wie das zu vermeiden ist?
Dankeschön.
Gruss Nina
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head>
<style type="text/css">
* {padding: 0px; margin:0;}
#infoBox {
width: 168px;
overflow:hidden;
}
#infoBox p {
background-color:green;
}
#infoBox img {
float:left; /* nur für IE6 um unteren weißen Rand zu vermeiden */
}
</style></head>
<body>
<div id="infoBox">
<img src="../img/imageBoxPicture.gif" alt="">
<p>Test</p>
</div>
</body>
</html>
-
Hallo,
Kann mir da vielleicht jemand einen Tip geben wie das zu vermeiden ist?
Ich wuerde mal versuchen, das Bild auch in ein <p>-Element
zu setzen und dann dieses mit CSS zu formatieren (margin u.s.w.).
Etwa so:<div id="infoBox">
<p id="bildp"><img src="../img/imageBoxPicture.gif" alt=""></p>
<p id="textp">Test</p>
</div>mfg, Thomas
-
Hallo,
Gebe ich nun dem Bild die Eigenschaft float: left; mit, ist das Problem im IE6 behoben. Allerdings fügt der IE5 dann einen linken Rand von 3px Breite ein. Es ist echt zum verrückt werden.
die einfachste Lösung wäre ein tolerantes Layout.
Aber es gibt ja auch CSS-Weichen, und auch noch IE-Weichen per "conditional comment", sodass genug Unterscheidungen der Browser möglich sind; in http://www.lipfert-malik.de/webdesign/tutorial/css.html sind z.B. einige solcher Weichen per conditional comment für die IE 5, 55 und 6, und auch CSS-Weichen beschrieben.
Die von dir in deinem anderen Posting angefragten expression (IE-dhtml) würde ich grundsätzlich vermeiden oder nur sehr gründlich getestet einsetzen. In http://www.lipfert-malik.de/webdesign/tutorial/bsp/dreispaltenplusx.html ist eine Lösung per expression im Quelltext erkennbar, die da per JavaScript festgelegt eigentlich vielseitiger anzuwenden wäre, aber noch ergänzt werden müsste um für kleine Fenster stabil zu laufen. Also auch ein Beispiel für eines der möglichen Probleme von expressions, andere Probleme hängen noch vom Darstellungsmodus der IE, also doctype usw., ab.
Schließlich könnten die 3 Pixel noch bei Bedarf durch das Nachbarelement (und passendem z-index) abgedeckt werden, ist aber auch etwas unschön und erfordert wohl position:relative;, clip dürfte hier wohl gar nicht möglich sein.
Grüsse
Cyx23