Zur Navigation

Unterschiedliche Interpretation bei padding

1 Mamuel (Gast)

Hey leute, habe das problem gefunden. vielen dank für eure inputs. warum bei mir die float-geschichte nicht sauber funktioniert hat, hat folgende ursache:

da ich bei der navigation mit einem list-element gearbeitet habe, und dort mit PADDING die liste zur darstellung eingerückt habe, wurde im Firefox die gesamtbreite übergeordneten list-box beeinflusst (also verbreitert). deshalb konnte ich das content-element nicht richtig positionieren! Im IE hat PADDING keinen einfluss, sprich es wird vom parser übergangen, deshalb war dort die darstellung korrekt.

05.03.2006 17:21

2 Mamuel (Gast)

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!

05.03.2006 17:36

3 Jörg

Hallo Mamuel,

einer kurze Ergänzung zum padding-Problem: Der IE 6 verhält sich bei der Berechnung von Gesamtbreiten und -Höhen dann wie die anderen Browser, wenn er im standardkonformen Modus läuft, d.h. wenn die betreffende Seite eine Dokumenttyp-Angabe für striktes HTML oder XHTML aufweist, z.B.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Ansonsten berücksichtigt er, wie du bereits festgestellt hast, das padding gnausowenig wie sein Vorgänger IE 5

Das zweite Problem schau ich mir später nochmal an (bin grad etwas kurz angebunden)

05.03.2006 21:30 | geändert: 05.03.2006 21:31

4 Jörg

(Beiträge in einen eigenen Thread verschoben)

05.03.2006 23:21

5 C)-(iLL@

Also mein Firefox wird sehr böse, wenn ich im Markup
 <div id="layer3">
schreibe, und dann im CSS mit
#Layer3 {
stylen will. Zumindest etwas bockig :)

05.03.2006 23:35

6 Jörg

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

Das Box-Modell

05.03.2006 23:39 | geändert: 05.03.2006 23:41

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]