W3 Box model
Tom Collins
- css
0 Sönke Tesch0 Tom Collins0 Sönke Tesch0 Tom Collins0 Sönke Tesch0 Tom Collins0 molily
0 Tom Collins
Einen wunderschönen guten Morgen miteinander,
da ich mich nach meinem peinlichen Fauxpas (Pöbelei über Netscape) entschlossen habe, mich doch intensiver mit den CSS Standards zu befassen, habe ich folgende Frage:
Gilt das Box model (http://www.w3.org/TR/REC-CSS2/box.html) für alle Elemente (div, input, img etc) oder gibt es Ausnahmen?
Ich habe nämlich das Gefühl, dass sich Netscape (sonst im Vergleich zum IE ja ein Muster an Standardkonformität, wie ich lernen musste) bei der Formatierung von Input-Boxen nicht so recht daran hält:
Nach W3 müsste eine Vergrößerung von padding-left die Breite des gesamten Objekts vergrößern.
Beispiel:
input {
padding : 0px;
margin : 0px;
}
input.text {
width : 100px;
border : 1px solid #555555;
padding-left: 3px;
}
Ein Input der Klasse text müsste somit 105px breit sein. Funktioniert unter IE6, nicht aber unter NS7. Hat Netscape da tatsächlich einen Hänger oder hab' ich wieder was falsch gemacht?
Gruß von TomC
Gilt das Box model (http://www.w3.org/TR/REC-CSS2/box.html) für alle Elemente (div, input, img etc) oder gibt es Ausnahmen?
Ja, aber wie Du ja sicher weißt, gibt es verschiedene Arten von Elementen, und bei einigen von ihnen sind einige Angaben nicht relevant (z.B. Breite und Höhe bei inline-Elementen).
Nach W3 müsste eine Vergrößerung von padding-left die Breite des gesamten Objekts vergrößern.
Tut es auch: http://kino-fahrplan.de/privat/st/selfforum/width.
Kannst Du die Beispieldatei mal ins Netz setzen? Hast Du den richtigen Dokumenttyp angegeben (z.B. HTML 4 strict)?
Gruß,
soenk.e
Hallo Sönke
die Seite ist unter folgender Adresse zu finden:
http://www.cui-bono.info/e/klu/anfahrt.html
(ist noch nicht fertig und noch ein wenig schief)
http://kino-fahrplan.de/privat/st/selfforum/width
Funktioniert unter IE6, nicht aber unter NS7. Wie bei mir
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Danke,
TomC
BTW: Wie ist in diesem Forum eigentlich die Ansprache geregelt: Mit dem angegebenen Namen oder mit dem, was unter dem Posting steht?
die Seite ist unter folgender Adresse zu finden:
http://www.cui-bono.info/e/klu/anfahrt.html
Welches Element? Mit Straße und Mozilla 1.3 funktioniert's jedenfalls.
input{
padding : 0px;
padding-left : 3px;
border : 1px solid #555555;
}
input.s{
width : 147px;
}
3 Pixel Innenrand + 2 Pixel Rahmen + 147 Pixel Innenbreite ergeben 152 Pixel insgesamt:
<img src="http://kino-fahrplan.de/privat/st/selfforum/kluvensiek.png" border="0" alt="">
Aber vielleicht solltest Du statt padding doppelt zu definieren, besser nur eine padding-Zeile benutzen:
padding:0 0 0 3px; (oben, rechts, unten, links)
http://kino-fahrplan.de/privat/st/selfforum/width
Funktioniert unter IE6, nicht aber unter NS7.
Nanu? Hast Du mal eine Grafik?
Wie bei mir <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Nein, in width.html ist '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' angegeben. Wer zeigt Dir an, daß da transitional drinsteckt? Netscape 7?
BTW: Wie ist in diesem Forum eigentlich die Ansprache geregelt: Mit dem angegebenen Namen oder mit dem, was unter dem Posting steht?
Geregelt wohl kaum, aber wie redest Du Leute an, mit ihrer Unterschrift oder ihrem Namen? ;)
Gruß,
soenk.e
Funktioniert unter IE6, nicht aber unter NS7.
Nanu? Hast Du mal eine Grafik?
http://www.cui-bono.info/e/muster.html
Nein, in width.html ist '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">' angegeben.
Ändert am Erscheinungsbild nichts
BTW: Wie ist in diesem Forum eigentlich die Ansprache geregelt: Mit dem angegebenen Namen oder mit dem, was unter dem Posting steht?
Geregelt wohl kaum, aber wie redest Du Leute an, mit ihrer Unterschrift oder ihrem Namen? ;)
In Foren oft auch mit der Unterschrift, wg. Nickname und Eindeutigkeit und so. Aber ich hab' schon verstanden ;-)
Tom
Funktioniert unter IE6, nicht aber unter NS7.
Scheint dann wohl tatsächlich ein Fehler in Netscape 7 zu sein. Es gibt ein halbes Dutzend Fehler zum Thema "input und padding" bei Mozilla, aber die sind so ziemlich allesamt aus dem Jahr 2000. Netscape hängt allerdings immer ein bißchen hinterher - in meinem (auch nicht mehr ganz aktuellen) Mozilla 1.3 funktioniert es jedenfalls einwandfrei.
Vielleicht schaust Du einfach mal unter http://http://bugzilla.mozilla.org/query.cgi, ob da irgendwas passendes dabei ist und/oder probierst es mal mit einem aktuellen Mozilla. Das könnte zumindest Aufschluss darüber geben, ob die Geschichte schon behoben ist.
Ein gravierendes Problem scheint es bei Dir ja glücklicherweise nicht zu sein.
Gruß,
soenk.e
Ein gravierendes Problem scheint es bei Dir ja glücklicherweise nicht zu sein.
Nö, gewiss nicht, ich bin bloß drüber gestolpert.
Mit Mozilla 1.3 funktioniert es prächtig. Sollte vielleicht zum Standardbrowser im Netz werden ;-)
Ich habe jetzt eine Version gebastelt, mit der ich ganz gut leben kann, und die auch den W3C-Vorgaben entspricht. Das sollte reichen.
Vielen Dank!
Gruß von Tom
Hallo,
Funktioniert unter IE6, nicht aber unter NS7.
Scheint dann wohl tatsächlich ein Fehler in Netscape 7 zu sein.
Das kann man im Grunde genommen so nicht sagen. Ein input-Element ist wie beispielsweise ein img-Element ein replaced element und die width-Eigenschaft bezeichnet die content width. Was dort letztlich »ersetzt« wird, wird also *innerhalb* der content edge eingesetzt. Der Aufbau wäre somit: margin-left, border-left, padding-left, das Eingabefeld samt Rahmen und Innenabständen, padding-right, border-right, margin-right. Bei Bildern und anderen replaced elements ist das auch der Fall. Für diese Inhalte hat das CSS-Boxmodell keine Gültigkeit und der Standard sieht nicht vor, dass CSS-Eigenschaften auf diese ersetzen Inhalte selbst wirken. padding müsste also bei Formularfeldern genauso wie bei Bildern außerhalb angezeigt werden. Dass Browser das Formularfeld wie eine normale Inline-Block-Box und den Rahmen usw. des GUI-Widgets als Teil des Boxmodells interpretieren und die Formatierungen auf das Formularfeld selbst anwenden, ist nirgendwo spezifiziert, das ist eine rein proprietäre Erweiterung nach eigenen Gesetzmäßigkeiten.
Opera setzt width (in allen Rendermodi) übrigens ebenso wie Netscape 7.0 um. Innerhalb des Konzepts, welches den Standard sowieso hinter sich lässt, ist das allerdings extrem inkonsequent.
Mathias
Bei Mozilla treten die beschriebenen Probleme übrigens nicht auf.
Tom