Text Pixel-genau positionieren
Stefan
- css
Hallo und guten Morgen
Ich müsste einige Absätze auf einer Seite pixelgenau positionieren. Nun gibt es allerdings Unterschiede zwischen Mozilla und IE.
Versuchen Sie bitte dazu folgenden Code:
<html>
<head>
<style type="text/css">
<!--
html, body { margin:0; border:0 none; padding:0;
font-family: arial; font-size: 14px;}
p.pos0 {position:absolute; left: 0px; top: 0px;}
p.pos1 {position:absolute; left: 0px; top: 15px;}
-->
</style>
</head>
<body>
<p class="pos0">TEXT BEI POS0</p>
<p class="pos1">TEXT BEI POS1</p>
</body>
</html>
Im IE werden die beiden Zeilen erwartungsgemäss untereinander dargestellt. Mozilla scheint irgendwie eine "Leerzeile einzuschalten.
Witzig dabei ist folgendes: Wenn man das Spiel mit pos2, pos3, etc weitertreibt, schiebt Mozilla keine weiteren "Leerzeilen" ein...
Was ist hier falsch?
Ist das ein Problem in Mozilla oder stimmt was mit meinem Code nicht?
Vielen Dank für alle Bemühungen und guten Tag wünscht
Stefan
Moin
p hat natürlich auch margin und padding, die bei den Browsern abweichen können...
Moin
p hat natürlich auch margin und padding, die bei den Browsern abweichen können...
Ja, es ist richtig, wenn man bei allen p.* ein margin:0; padding:0; zufügt, geht es. Warum wird das aber nicht von oben bei "body,html" übernommen?
Danke
Stefan
Hi,
p hat natürlich auch margin und padding, die bei den Browsern abweichen können...
Ja, es ist richtig, wenn man bei allen p.* ein margin:0; padding:0; zufügt, geht es. Warum wird das aber nicht von oben bei "body,html" übernommen?
Weil margin und padding nicht inherit als initial-Value haben, sondern 0.
Und da es im Browser-internen Stylesheet anders als 0 definiert sein kann, muß man es explizit auf 0 setzen, wenn man 0 unbedingt als Wert haben will.
Grundregel: verlasse Dich nicht darauf, daß irgendein Wert für eine Eigenschaft gesetzt ist. Setze ihn selber.
cu,
Andreas
Hallo,
Ja, es ist richtig, wenn man bei allen p.* ein margin:0; padding:0; zufügt, geht es. Warum wird das aber nicht von oben bei "body,html" übernommen?
Die eigentliche Erklaerung hat Dir MudGuard schon geliefert.
Die meisten Browser verwenden intern etwas aehnliches
wie das "Sample Stylesheet":
http://www.w3.org/TR/REC-CSS2/sample.html
Dort haben P, UL, OL, DL und andere Block-Level-Elemente
oben und unten einen margin von 1.33em.
Gruesse,
Thomas