nicht angemeldet
Display und Float bei verschiedenen Browsern
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>.
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.
Kann mir mal jemand Durchblick verschaffen? Danke.
Cap
-
Sorry, dieses Posting steht natürlich auch schon weiter unten. Habe nur eine gecachte Seite im Browser aktualisiert und schon wars passiert.
Gruss
Cap -
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
-
Hallo Axel,
danke für die zahlreichen Beispiele. Die Lösung für das erste Problem ist mir jetzt klar.
Das zweite ist mir immer noch ein Mysterium. Hier ein ausführlicheres Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Unbekannt</title>
</head><body style="margin:0px; padding:0px;">
<div style="background-color:#999999;">
<div>
<img src="img/pink.gif" width="10" height="10" style="float:left;">
<img src="img/pink.gif" width="10" height="10" style="float:right;">
</div>
<div>
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum
lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab
Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit.
</div>
</div>
</body>
</html>Da der Body auf 0 margin und padding gesetzt wurde, sollte der gesamte Inhalt direkt am Rand sitzen. Im Mozilla tut er das auch. Im IE aber nur der Text und die Hintergrundfarbe, nicht aber die Grafik. Das Problem tritt auch auf, wenn ich links noch ein <div> daneben setze, hat also meiner Meinung nach nichts mit dem Body-Tag zu tun.
Gruss
Cap-
Hi,
Das zweite ist mir immer noch ein Mysterium. Hier ein ausführlicheres Beispiel:
<body style="margin:0px; padding:0px;">
<div style="background-color:#999999;">
<div>
<img src="img/pink.gif" width="10" height="10" style="float:left;">
<img src="img/pink.gif" width="10" height="10" style="float:right;">
</div>Setze für beide div und für die img auch padding und margin auf 0 (zumindest an den Seiten, wo Du das so haben willst, also links bzw. rechts).
Da der Body auf 0 margin und padding gesetzt wurde, sollte der gesamte Inhalt direkt am Rand sitzen. Im Mozilla tut er das auch. Im IE aber nur der Text und die Hintergrundfarbe, nicht aber die Grafik.
Verschiedene Browser haben für diverse Elemente verschiedene Voreinstellungen...
Wenn Du explizit kein margin und kein padding haben willst, dann sag das auch - verlasse Dich nicht auf die Voreinstellungen.cu,
Andreas--
MudGuard? Siehe http://www.mud-guard.de/-
<body style="margin:0px; padding:0px;">
<div style="background-color:#999999;">
<div>
<img src="img/pink.gif" width="10" height="10" style="float:left;">
<img src="img/pink.gif" width="10" height="10" style="float:right;">
</div>Setze für beide div und für die img auch padding und margin auf 0 (zumindest an den Seiten, wo Du das so haben willst, also links bzw. rechts).
Hallo Andreas,
bewirkt bei mir keine Änderung. Das hatte ich auch schon ausprobiert, ebenso wie verschiedene display - Einstellungen.
Gruss
Cap
-
-
Hallo,
danke für die zahlreichen Beispiele. Die Lösung für das erste Problem ist mir jetzt klar.
Das zweite ist mir immer noch ein Mysterium. Hier ein ausführlicheres Beispiel:
Ich hab mal etwas "vereinfacht", notwendige Attribute(alt) ergänzt und mit sinnvollerem Markup(p) gearbeitet. Im IE 6.0 unter Windows siet es allerdings bei mir genauso aus, wie im Mozilla 1.3.1. Einen IE 5 habe ich leider im Moment nicht hier.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Unbekannt</title>
<style type="text/css">
<!--
html, body {margin:0; padding:0;}
-->
</style>
</head>
<body>
<div style="background-color:#999999; margin:0; padding:0;">
<img src="stones.jpg" alt="Steine" title="" width="10" height="10" style="float:left;">
<img src="stones.jpg" alt="Steine" title="" width="10" height="10" style="float:right;">
<p style="margin:0; padding:0;">Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit.</p>
</div>
</body>
</html>viele Grüße
Axel
-
Hallo,
habe es gerade mal überprüft, der Fehler tritt tatsächlich nur im IE 5 auf. Also wieder Zeit für ein Workaround? :(
Gruss
Cap-
Hallo,
ich habe den Fehler eingekreist. :) Es muss an einer fehlerhaften Implementierung von float im IE 5 liegen. Zum Ausprobieren reicht schon folgender Code:
<html>
<head>
<title>Unbenannt</title>
</head>
<body style="margin:0px; padding:0px;">
<img src="img/pink.gif" style="float:left;">
</body>
</html>Hat irgend jemand eine Idee wie man da drum herum kommt? Das muss doch schon mal veröffentlicht worden sein.
Gruss
Cap
-
-
-
Hallo,
also bei mir im IE6 klappts auch.
Allerdings macht bei mir der IE manchmal auch "Unsinn"(?!) wenn man die <img>'s so wie in deinem Beispiel untereinander schreibt, also so:
<img src="img/pink.gif" width="10" height="10" style="float:left;">
<img src="img/pink.gif" width="10" height="10" style="float:right;">probiere mal (just for fun) diese nebeneinander zu setzen, also:
<img src="... style="float:left;"><img src="... style="float:right;">
Grüße
Palme
-
-