Unterschiedliche Interpretation bei padding

Also hier noch n kurzer hinweis zur darstellung in unterschiedlichen browsern.

Bei meinen reasearches bezüglich darstellungsabweichungen in IE, OPERA, SAFARI und FIREFOX bin ich zu folgenden erkenntnissen gekommen:

Viele web-programmierer versuchen die darstellung ihrer webseite anhand von browserspezifischen css-dateien zu beeinflussen. um dies so gut als möglich zu umgehen, empfiehlt sich in erster linie auf PADDING zu verzichten, da dieses behaviour von den verschiedenen browsern nicht/oder falsch interpretiert wird.

Man kann also grundsätzlich mit einem css-dokument arbeiten, sollte aber bei der gestaltung darauf achten dass man anstelle von padding sublayers, oder class-divisions verwendet um die inhalte dennoch richtig darzustellen:

hier ein beispiel:

<style type="text/css">
<!--
#Layer1 {
	width:600px;
	height:300px;
	background:#CCCCCC;
}
#Layer2 {
	float:left;
	width:200px;
	height:300px;
	background:#999999;
}
#Layer3 {
	float:left;
	width:400px;
	height:300px;
	background:#FFFFCC;
}
#Layer4 {
	margin: 10px 10px 10px 10px;
	background:#FFCCCC;
}
-->
</style>
<div id="Layer1">
	<div id="Layer2">
	NAVIGATION
	</div>
	<div id="layer3">
		<div id="Layer4">
		  <p>CONTENT</p>
		  <p>HIER WIRD DER INHALT PLATZIERT WELCHER ZU DEN  SEITEN DEN ENTSPRECHENDEN ABSTAND HAT.  </p>
		</div>
	</div>
</div>

PADDING wird z.b. im Firefox interpretiert und zur box-breite hinzugerechnet. bei IE jedoch geschieht nichts, weil der parser das behaviour übergeht!

(Beiträge in einen eigenen Thread verschoben)

Hier auch nochmal das Kapitel in SELFHTML, das diese Problematik behandelt und auch verschiedene Lösungswege aufzeigt:

Das Box-Modell