Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Software>HTML-Interpretations-Bug in Firefox 4 und 5?

HTML-Interpretations-Bug in Firefox 4 und 5?

dom_beta30.08.1114:49

Hallo,

kann es sein, daß Firefox 4 und 5 die Angaben für Padding nicht richtig anwendet?

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

<div style="width:400px; margin-left:auto; margin-right:auto; padding:0; border:1px solid black; ">
<p>Text bla bla . Absatz 1. fhw uiwhf wfiwhe iwufwiufh wief hfwe</p>
<p>Absatz 2 ghreg igeiruh reiugheriug heiugheiu herighreiu hgeiugh iuherg eghreg iegiuheg eirg gur</p>
</div>
</body>
</html>

Zwischen dem DIV Rahmen und dem ersten Absatz "zeichnet" Firefox einen Abstand.

Der Internet Explorer Version 8 "zeichnet" dort keinen Abstand, der Text "klebt" sozusagen am Rahmen des DIV-Containers, wie von mir beabsichtigt.

Habe ich da was wegen Padding falsch verstanden?

Macht der IE einen Fehler oder Firefox?


Danke für die Aufklärung!
„...“
0

Kommentare

violenCe30.08.1114:59
wer einen fehler macht weiß ich nicht, dazu müsste man mal in die html spezifikation gucken und da hab ich ehrlich gesagt auch keine lust zu:D

das verhalten tritt wegen dem p und nicht wegen dem div auf.

der absatz, wie der name schon sagt, erzeugt einen abgetrennten textbereich, und hat auf der ersten zeile eine größere zeilenhöhe und unter der letzen ebenfalls.

damit der absatz von anderen optisch getrennt ist.

ich weiß ja nicht was du genau vor hast, aber hast du mal versucht dem p ein margin-top zu verpassen?
0
uplift
uplift30.08.1115:01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>

<div style="width:400px; margin-left:auto; margin-right:auto; padding:0; border:1px solid black; ">
<p style="margin:0;">Text bla bla . Absatz 1. fhw uiwhf wfiwhe iwufwiufh wief hfwe</p>
<p>Absatz 2 ghreg igeiruh reiugheriug heiugheiu herighreiu hgeiugh iuherg eghreg iegiuheg eirg gur</p>
</div>
</body>
</html>

So funktioniert es. Ich würde jetzt drauf tippen, dass IE den Fehler macht. <p> bekommt im Firefox automatisch einen Abstand. Ob das nun richtig oder falsch ist - keine Ahnung...
„Computer erleichtern uns ungemein die Arbeit an Problemen, die wir ohne sie nicht hätten. Ich habe keine Lösung, aber ich bewundere das Problem.“
0
Megaseppl30.08.1115:07
Setz' mal testweise 'nen Loose-Doctype statt strict:

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

Kann sein dass es damit schon besser aussieht.

Falls Du das Doctype nicht umstellen willst oder es nicht funktioniert gib den p-Tags mal ein margin von 0px.
0
Megaseppl30.08.1115:09
Arghs... Ich tippe auf dem iPad einfach zu langsam!
0
sierkb30.08.1116:25
Gib dem p-Element mal einen roten border, dann siehst Du, woran es liegt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div {
width:400px;
margin-left:auto;
margin-right:auto;
padding:0;
border:1px solid black;
}

p {
border: 1px solid red;
}

</style>
</head>
<body>
<div>
<p>Text bla bla . Absatz 1. fhw uiwhf wfiwhe iwufwiufh wief hfwe</p>
<p>Absatz 2 ghreg igeiruh reiugheriug heiugheiu herighreiu hgeiugh iuherg eghreg iegiuheg eirg gur</p>
</div>
</body>
</html>

Abhilfe:

p {
margin-top: 0;
margin-bottom: 0;
}
0
Muty30.08.1116:32
Im übrigen ist es korrekt, dass Absätze einen gewissen Abstand halten. Das entspricht zumindest den meisten typografischen "Regeln" aus den USA. In Deutschland rückt man (glaube ich) den Absatz eher ein Stück ein.
0
sierkb30.08.1116:51
Hintergrund des Ganzen: die Browser müssen für die HTML-Elemente ja irgendwelche Grundwerte haben, die standardmäßig verwendet werden. Durch eigene CSS-Angaben überschreibt man diese Standardwerte.

W3C: CSS2.1 Spezifikation: Appendix D. Default style sheet for HTML 4 .

An der Stelle sind alle empfohlenen Standardgrößenangaben und Abstände für alle HTML-Elemente definiert. Die Browser-Hersteller können/sollen sich möglichst 100% daran halten, tun es zuweilen aber in Einzelfällen bzw. bei einigen Elementen leider nicht.

Bzgl. des p-Elements sagt das Default style sheet for HTML 4 :
[..]
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
[..]

Wenn der IE das in diesem Fall anders anzeigt als der Firefox, dann würde ich vor dem Hintergrund dieser Informationen folgenden Schluss daraus ziehen: der Firefox verhält sich in diesem Fall getreu der Spezifikation, der IE hingegen nicht. Zumal dann noch die Frage ist: welcher IE (kann ja sein, dass das in einer späteren Version behoben ist bzw. Microsoft an der Stelle die von der Spezifikation vorgeschlagenen Werte hernimmt)?
Und mal gegentesten (ich bin dazu grad' zu faul) in Safari, Chrome und Opera, wie die sich diesbzgl. verhalten und was für margin-Werte die für's p-Element standardmäßig vorsehen bzw. ob sie den in der CSS2.1-Spezifikation empfohlenen Werte von margin-top: 1.12em, margin-bottom: 1.12em, margin-left: 0, margin-right:0 ebenso spezifikationsgetreu umsetzen wie es Firefox tut.

Eben weil manche Browser sich nicht immer an diese in der Spezifikation niedergeschriebenen Default-Werte halten, hat sich seit einiger Zeit bei einigen Web-Entwicklern folgende Praxis breitgemacht: ein eigenes Reset-Stylesheet, welches erstmal komplett alle Werte für alle Browser identisch auf Null setzt: z.B so: Eric Meyer: CSS Tools: Reset CSS . Um dann darauf aufbauend die eigenen Werte zu setzen.

Allerdings ist dies Reset-Methode per se umstritten und birgt auch Nachteile: Jens Meiert: Why “Reset” Style Sheets Are Bad . Die Methode per se ist also nicht unumstritten selbst in der High-End-Liga der CSS-Experten (und in dieser Liga spielen beide Genannten, Eric Meyer galt jahrelang als DER CSS-Papst schlechthin, Jens Meiert hat ebenso wie Eric Meyer Bücher zum Thema CSS verfasst, beide sind seit Jahren im W3C-Umfeld tätig und schreiben an Spezifikationen mit), und es gibt da Befürworter und harte Gegner davon. Ich halte es mit der Argumentation von Jens Meiert und lehne solche Reset-Stylesheets aus gleichen Gründen ab wie er.
0
sierkb30.08.1118:24
IECSS.com: Internet Explorer User Agent Style Sheets :
IECSS
A UA Style Sheet is a simple set of css styles that each web browser uses before any other css styles are applied.

This chart lists and compares the different default style sheets used to render HTML in the four major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.

You can download each of these UA style sheets by using the links at the top of this chart.


Demzufolge existieren folgende Standardwerte für's p-Element im Internet Explorer:

IE6, IE7:
p {    
display: block;
}

IE8, IE9:
p {    
display: block;
margin: 1em 0;
}

IE6 und IE7 haben also defaultmäßig fürs p-Element keinen margin oben und unten, IE8 und IE9 hingegen setzen einen margin von 1em (also 1 Geviert). Die CSS-Spezifikation schlägt an der Stelle einen davon minimal abweichenden Wert von 1.12em vor statt 1em.

Abgesehen davon habe ich's gerade nochmal getestet mit IE8 unter Windows XP:

Auch IE8 stellt's zumindest bei mir genauso dar wie Firefox: mit Rand (margin). Und damit verhält sich IE8 in dem Punkt sich genauso wie Firefox. Und Opera. Und Safari. Und Chrome.
Wenn Du also wirklich mit dem IE8 und nicht mit dem IE7 oder gar IE6 dieses Phänomen hast und Dich nicht geirrt hast, dann weiß ich nicht, was bei Dir da falsch läuft, mein IE8 verhält sich an dieser Stelle weitgehend korrekt und wie die anderen Browser.
0
sierkb30.08.1119:05
Das/die Default-Stylesheets für Firefox waren bis FF3.6.x unter resource://gre/res/ [url]resource://gre/res/[/url] zu finden (die html.css-Datei). Seit FF4 hat sich da die Location ein wenig geändert: resource://gre/ [url]resource://gre/[/url] und dann durchhangeln durch chrome/ toolkit/ res/ . Absoluter Pfad: jar:file:///Applications/Firefox.app/Contents/MacOS/omni.jar!/chrome/toolkit/res/ [url]jar:file:///Applications/Firefox.app/Contents/MacOS/omni.jar!/chrome/toolkit/res/[/url].

Demnach hat die html.css [url]jar:file:///Applications/Firefox.app/Contents/MacOS/omni.jar!/chrome/toolkit/res/html.css[/url] von Firefox fürs p-Element u.a. folgende Standardwerte:

p, dl, multicol {
display: block;
margin: 1em 0;
}

Firefox in diesem Punkt also wie IE8 und IE9. Ich nehme stark an, dass auch Opera, WebKit/Safari/Chrome hier alle ebenso einen Wert von 1em für margin-top und margin-bottom haben.

Randnotiz: Der Ursprung/die Idee eines solchen Default Stylesheets geht übrigens auf Todd Fahrners Base Stylesheet aus dem Jahre 1998 zurück. Es ist Grundlage für obig genanntes Default style sheet der CSS2-Spezifikation gewesen, von Todd Fahrner stammt auch der erste Acid-Browser-Test (Acid1) .
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.