nicht angemeldet
Hallo Cheatah, hallo Forumsbesucher!
Ich habe das erwähnte padding/overflow:hidden-Problem reproduziert (s. beigefügten Quelltext).
Damit erhalte ich folgende Darstellung (Windows XP Pro mit SP1):
Opera 7.23: Perfekt. Der Absatz samt Rahmen bleibt innerhalb des padding. Das Bild wird bündig mit dem Absatz abgeschnitten.
IE6: Der Absatz wird auf die Breite des Bildes ausgedehnt (wie gewohnt). Zwar bleibt der Text innerhalb des paddding, das Bild und der Rahmen jedoch werden erst am Rahmen des <div> abgeschnitten.
Firefox 0.8: Jetzt wird´s lustig. Nach dem Laden entspricht die Darstellung weitgehend dem IE; allerdings endet das <div> unmittelbar nach der letzten Textzeile, d.h. kein margin und Rahmen (des Absatzes), kein padding. Ändert man nun die Fenstergröße, so werden diese angezeigt, das div wird länger. Ändert man die Fenstergröße ein zweites mal, tut sich auch am rechten Rand etwas: der Absatz bleibt innerhalb des padding. Dieses Padding ist aber etwa doppelt so groß, wie es sein sollte. Das Bild erstreckt sich uber den Absatz hinaus bis zum Rahmen des <div>.
Ich hoffe die Beschreibung ist verständlich; ansonsten bitte ich darum, das Ganze am eigenen Rechner nachzuvollziehen. Bei Bedarf schicke ich gerne screenshots.
Noch eine andere Frage. Ich habe über den CSS-Teil von Selfhtml einen ganz guten überblick. Da lernt man aber vor allem etwas über die verschiedenen Eigenschaften, das Einbinden in Dateien, Selektoren etc. Um CSS zu verstehen, so mein Eindruck, muß man aber auch verschiedene Konzepte, wie eben den box-formatting-context, kennen. Sonst hat man einen unzusammenhängenden Haufen von Kenntnissen, die nur eingeschränkt auf neue Probleme übertragbar sind. Wie kann man das systematisch lernen, wenn man nicht die Spezifikation von vorne bis hinten lesen will? Mit welchem Aufwand muß man rechnen, bis Wissen zu Verstehen wird?
Gruß und schönes Wochenende
Toni
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body { background-color: #ffffff; }
div { width: 30em; padding: 2em; overflow: hidden; border: 2px solid #0000ff; }
p { border: 10px solid #ff0000; }
-->
</style>
</head>
<body>
<div>
<p>
<img src="bild.bmp" style="width: 800px; height: 150px;">
Verzweifle nicht, werde nicht mißmutig, wenn Du nicht die moralische oder intellektuelle
Höhe erreichen kannst, auf welcher ein andrer steht, und sei nicht so unbillig, andre gute
Seiten an Dir zu übersehn, die Du vielleicht vor jenem voraus haben magst - und wäre das
auch nicht der Fall! Müssen wir denn alle groß sein?
Verzweifle nicht, werde nicht mißmutig, wenn Du nicht die moralische oder intellektuelle
Höhe erreichen kannst, auf welcher ein andrer steht, und sei nicht so unbillig, andre gute
Seiten an Dir zu übersehn, die Du vielleicht vor jenem voraus haben magst - und wäre das
auch nicht der Fall! Müssen wir denn alle groß sein?
</p>
</div>
</body>
</html>