nicht angemeldet
Hallo,
ich bräuchte mal Hilfe von einem CSS-Experten, denn so ganz verstehe ich die Verhaltensweisen vom Internet Explorer noch nicht.
Wenn ich ein Bild mit einem ganz normalen <img>-Tag in einem <div> oder auch ganz ohne darstelle, besteht der IE darauf, einen kleinen Abstand zu allen umgebenden Elementen zu ziehen. Erst wenn ich dem Bild "display:block" zuweise, folgt das nächste Element direkt bündig. Wenn ich das aber tue, verweigert mir Mozilla die mittige Darstellung des Objekts über "text-align:center" durch ein umgebendes <div>.
Kombiniere text-align:center im umgebenden Element mit margin:auto im Block-Bild-Element, oder richte die Inline-Elemente entsprechend aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inline und Block Ausrichtung</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body style="font-size:40px;">
<!--Standard-Inlineausrichtung = horizontal: am text-align des umgebenden Blockelements; vertikal: baseline-->
<div style="border:1px solid black; text-align:center;">Text<img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none;">Text</div>
<hr>
<!--formatierte Inlineausrichtung = horizontal: am text-align des umgebenden Blockelements; vertikal: baseline bzw: bottom für das Bild; fehlerhafte Darstellung des IE-->
<div style="border:1px solid black; text-align:center;">Text<img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none; vertical-align:bottom;">Text</div>
<hr>
<!--formatierte Inlineausrichtung = horizontal: am text-align des umgebenden Blockelements; vertikal: bottom und bottom für das Bild-->
<div style="border:1px solid black; text-align:center;"><span style="vertical-align:bottom;">Text<img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none; vertical-align:bottom;">Text</span></div>
<hr>
<!--formatierte Inlineausrichtung = horizontal: am text-align des umgebenden Blockelements; vertikal: middle und bottom für das Bild-->
<div style="border:1px solid black; text-align:center;"><span style="vertical-align:middle;">Text<img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none; vertical-align:middle;">Text</span></div>
<hr>
<!--Standard-Blockausrichtung = horizontal: left des umgebenden Elements + padding-left des umgebenden Elements + margin-left; vertikal: top des umgebenden Elements + padding-top des umgebenden Elements + margin-top; Höhe: Höhe des Bildes + border + margin; fehlerhafte Darstellung des IE, weil er horizontal am text-align des umgebenden Blockelements ausrichtet.-->
<div style="border:1px solid black; text-align:center;"><img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none; display:block;"></div><hr>
<!--formatierte Blockausrichtung = horizontal: left des umgebenden Elements + padding-left des umgebenden Elements + margin-left; vertikal: top des umgebenden Elements + padding-top des umgebenden Elements + margin-top; Höhe: Höhe des Bildes + border + margin; fehlerhafte Darstellung des IE 5.x, weil er margin:auto nicht interpretiert, sondern horizontal am text-align des umgebenden Blockelements ausrichtet.-->
<div style="border:1px solid black;"><img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none; display:block; margin-left:auto; margin-right:auto;"></div>
</body>
</html>
Ein anderes Beispiel: In einem grossen <div> befinden sich zwei kleine Grafiken die mit float:left und "float:right" an den linken und rechten Rand gesetzt werden. Im Mozilla stehen die Grafiken exakt und wunderbar direkt am Rand. Im IE erst wenn ich sie in ein <span> hülle und dieses mit float formatiere. Dann spielt der Mozilla aber wiederrum nicht mehr mit.
Folgendes zeigt Dir, dass sich floatende Elemente nur an den entsprechenden Ecken des umgebenden Elements orientieren. Sie befinden sich also _nicht_ unbedingt immer vollständig _im_ Element. Erläutere deshalb nochmals Deine Forderung: "exakt und wunderbar direkt am Rand".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Floating</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div style="border:1px solid black; margin:50px; padding:10px;">
<img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none; float:left;"><img src="STONES.JPG" alt="Steine" style="width:100px; height:100px; border:0 none; float:right;"></div>
</body>
</html>
viele Grüße
Axel