css...padding

[css]

hi,

ich habe eine frage zu dem padding befehl in css...

und zwar wird der padding wert ja bei verschiedenen dokumenttypen und browsern unterschiedlich angezeigt (entweder width + padding = gesamtbreite oder width = gesamtbreite -> padding spielt bei der gesamtbreite keine rolle).

nun zu meiner frage:

gibt es eine möglichkeit, dass die padding angaben in jedem gängigen browser gleich behandelt werden?

[wahsaga]

hi,

ich habe eine frage zu dem padding befehl in css...

css hat keine befehle, sondern eigenschaften oder engl. properties.

und zwar wird der padding wert ja bei verschiedenen dokumenttypen und browsern unterschiedlich angezeigt (entweder width + padding = gesamtbreite oder width = gesamtbreite -> padding spielt bei der gesamtbreite keine rolle).

eigentlich macht es von den "grossen" browsern nur der IE in der 5er version falsch (version 6 je nach doctype bzw. rednering mode, aber den kannst du ja bestimmen).

gibt es eine möglichkeit, dass die padding angaben in jedem gängigen browser gleich behandelt werden?

jein.
den IE 5 kannst du nicht überreden, richtig zu rechnen.
aber du kannst ihm mit diversen techniken andere CSS-breiten- bzw. -höhenangaben vorsetzen.

da seien hier mal browserweichen (eher abzuraten), conditional comments, und "css hacks" genannt. google/suche im </archiv/>, um näheres zu den stichworten zu erfahren.

gruss,
wahsaga

[Struppi]

und zwar wird der padding wert ja bei verschiedenen dokumenttypen und browsern unterschiedlich angezeigt (entweder width + padding = gesamtbreite oder width = gesamtbreite -> padding spielt bei der gesamtbreite keine rolle).

Du vergißt, das es auch noch margin gibt, aber außer dem falschen Boxmodel vom IE machen es eigentlich alle gleich (NC 4.x hat alerdings mit diesen werten hin und wieder unterschiedliche Vorstellungen).

http://www.fabrice-pascal.de/artikel/ie5boxmodel/

Such mal nach CSS und box modell, dann wirst du weitere Infos finden http://www.google.de/search?num=30&hl=de&ie=UTF-8&oe=UTF-8&q=box+modell+CSS&btnG=Google+Suche&meta=lr%3Dlang_de|lang_en

Struppi.

[Patrick Andrieu]

Hallo Struppi (und die andern)!

aber außer dem falschen Boxmodel vom IE

à propos Boxmodel und falsche Handhabe vom IE...

Ich kaufe einen Bildrahmen... da soll ja das Bild drin, _in_ den Rahmen... Ich wähle also den Rahmen so, dass innerhalb des Rahmens das Bild ganz hineinpasst. Also ist die Gesamtheit des Dings, das ich später an die Wand hänge:

Bildbreite plus Rahmenbreite rechts plus Rahmenbreite links (und für die Höhe das Gleiche)

So...

Ich will nun auf der Webseite einen gestrichenen roten Rahmen von sagen wir mal einem Pixel Breite (border:1px dashed red;)

Mein "Bild" ist ein DIV mit gelbem Hintergrund (background-color:yellow;).

Für mich, der ich das von dem eingerahmten Bild an der Wand schon kenne, soll ja der Rahmen was anderes als das Bild sein, der Border also was anderes als das DIV sein, oder? Also, will sagen, wenn ich ein gestrichenes rot umrahmtes DIV auf der Webseite haben will, die meinetwegen eine graue Hintergrundfarbe hat (body { background-color:#eeeeee; }), dann soll der dashed Rahmen rot-grau sein, ja?

Dann guckt alle mal, wer es richtig macht...

Viele Grüße aus Frankfurt/Main,
Patrick (W3C hin- oder her, ich werde mich der Meinung enthalten... aber IE ist dem Bild + Rahmen-Vergleich näher dran, und seine Border sind rot-grau und nicht rot-gelb - ohne politische Hintergrund *ggg*)

[MudGuard]

Hi,

Ich will nun auf der Webseite einen gestrichenen roten Rahmen von sagen wir mal einem Pixel Breite (border:1px dashed red;)

Mein "Bild" ist ein DIV mit gelbem Hintergrund (background-color:yellow;).

Für mich, der ich das von dem eingerahmten Bild an der Wand schon kenne, soll ja der Rahmen was anderes als das Bild sein, der Border also was anderes als das DIV sein, oder? Also, will sagen, wenn ich ein gestrichenes rot umrahmtes DIV auf der Webseite haben will, die meinetwegen eine graue Hintergrundfarbe hat (body { background-color:#eeeeee; }), dann soll der dashed Rahmen rot-grau sein, ja?
Dann guckt alle mal, wer es richtig macht...

Natürlich machen es der Mozilla und der Opera richtig und der IE falsch. Wie fast schon zu erwarten war.

Siehe http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-style, wo es ganz eindeutig heißt:
All borders are drawn on top of the box's background.

Deine Wünsche in allen Ehren, aber Browser haben das darzustellen, was in den relevanten Standards definiert ist.

cu,
Andreas

[Patrick Andrieu]

Hallo!

Siehe http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-style, wo es ganz eindeutig heißt:
All borders are drawn on top of the box's background.

Weißt Du? Wenn gebürtige anglophonen Standards festlegen wundert mich nichts: Die fangen auch bei null an zu zählen ;-)

Viele Grüße aus Frankfurt/Main,
Patrick

[Thomas J.S.]

Hallo Parick,

Ich kaufe einen Bildrahmen... da soll ja das Bild drin, _in_ den Rahmen... Ich wähle also den Rahmen so, dass innerhalb des Rahmens das Bild ganz hineinpasst. Also ist die Gesamtheit des Dings, das ich später an die Wand hänge:

Bildbreite plus Rahmenbreite rechts plus Rahmenbreite links (und für die Höhe das Gleiche)

Du solltest ein Fenster für ein Haus kaufen. ;-)

Glas (Inhalt), Raum zwischen Glas und Fensterrahmen (Padding), Fensterrahmen (Border),  Raum zwischen Fensterrahmen und Wand (Margin), das Loch in der Wand (width).

Alle andere Interprätationen sind Baumängel und werden eingeklagt. ;-)

Grüße
Thomas

PS1: da merkt man deutlich, dass B.G. in einer Garage angefangen hat: die wohl hatte keine Fenster nur eine Hebetür.

PS2: auch das Boxmodel vom CSS2 ist im Grunde hirnverbrannt.

[Patrick Andrieu]

Hallo Thomas!

Glas (Inhalt), Raum zwischen Glas und Fensterrahmen (Padding), Fensterrahmen (Border),  Raum zwischen Fensterrahmen und Wand (Margin), das Loch in der Wand (width).

Schönes Beispiel... Ich will aber nicht darüber streiten, ob IE das richtig oder falsch macht, _ich weiß_, dass er es falsch macht, will sagen: ich weiß, dass er die Definition, wie sie MudGard zitiert hat, falsch interpretiert.

Aber eben diese Def. stellt die Frage, was ist ein Rahmen? Ist es um oder auf? IE macht einen Rahmen _um_ das DIV, die Definition will es aber so, dass der Rahmen _auf_ das DIV kommt (was ist logischer?... Auslegungssache?...).

Nun, was ist aber ein Rahmen? Man rahmt ein Bild _um_, man rahmt nicht ein Bild _auf_, oder? Oder rahmt man ein Bild _ein_? Und wie ist das dann zu interpretieren? :)

Für die Newbies, die damit anfangen, lasse ich ein Beispiel online:
http://www.atomic-eggs.com/temp/rahmen.html

PS1: da merkt man deutlich, dass B.G. in einer Garage angefangen hat: die wohl hatte keine Fenster nur eine Hebetür.

LOL - und ein- um- aufgerahmte Bilder?

PS2: auch das Boxmodel vom CSS2 ist im Grunde hirnverbrannt.

Warum?

Viele Grüße aus Frankfurt/Main,
Patrick

[Thomas J.S.]

Hallo Patrick,

Aber eben diese Def. stellt die Frage, was ist ein Rahmen? Ist es um oder auf? IE macht einen Rahmen _um_ das DIV, die Definition will es aber so, dass der Rahmen _auf_ das DIV kommt (was ist logischer?... Auslegungssache?...).

Ne: "In terms of the box model, "background" refers to the background of the content and the padding areas. Border colors and styles are set with the border properties. Margins are always transparent so the background of the parent box always shines through.
"

Der IE macht es richtig!

Nun, was ist aber ein Rahmen? Man rahmt ein Bild _um_, man rahmt nicht ein Bild _auf_, oder? Oder rahmt man ein Bild _ein_? Und wie ist das dann zu interpretieren? :)

Einen Rahmen macht/zieht man um etwas. IMHO.

PS2: auch das Boxmodel vom CSS2 ist im Grunde hirnverbrannt.
Warum?

Weil es zu viele wiedersprüch hat.
Die "alte" definition sagt: "(width of containing block) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right"

Es gab im CSS2 theoretisch keine Möglichkeit eine echte Breite ""(width of containing block)" für eine Box festzulegen.
Mit CSS3 wird diese Idiotie fortgestzt und wird um die selbige umzugehen box-width eingeführt:

'Box-width' and 'box-height', if not set to 'auto', override 'width' and 'height' respectively. They set the width/height from border-edge to border-edge. I.e., 'box-width: X' is equivalent to setting 'width: (X - padding-left - border-left - padding-right - border-right)'

Wobei es hier schon wieder verwirrung gestiftet wird, denn gemeint ist eigentlich:
'box-width: X' is equivalent to setting 'width: (X + padding-left + border-left + padding-right + border-right)'

Ich finde auch, dass es nicht, wie behauptet, der Fehler der Browser war, dass das CSS2 Boxmodell nicht nach der Spzifikation sondern nach dem gesunden Menschenverstand interpretiert wurde.
Es mag zwar schön sein, dass die Browser jetzt dies nach der Spez. tun (wenigstens ist das jetzt einheitlich unbrauchbar), aber geholfen ist damit niemanden.

Grüße
Thomas

[Patrick Andrieu]

Hallo Thomas!

Ne: "In terms of the box model, "background" refers to the background of the content and the padding areas. Border colors and styles are set with the border properties. Margins are always transparent so the background of the parent box always shines through.
"

Der IE macht es richtig!

Hmm, nachdem was Du zitiert hast, habe ich eben dann doch den Eindruck, dass er es _nicht_ richtig macht:"so the background of the parent box always shines through". Und eben das tut der in meinem Beispiel http://www.atomic-eggs.com/temp/rahmen.html nicht. Der Border ist rot/weiß, sollte der background wirklich through shinen, müsste er wie bei Mozilla/Opera rot/gelb sein...?

Ich finde auch, dass es nicht, wie behauptet, der Fehler der Browser war, dass das CSS2 Boxmodell nicht nach der Spzifikation sondern nach dem gesunden Menschenverstand interpretiert wurde.
Es mag zwar schön sein, dass die Browser jetzt dies nach der Spez. tun (wenigstens ist das jetzt einheitlich unbrauchbar), aber geholfen ist damit niemanden.

Tja... manchmal fragt man sich, was bei "denen" da abgeht. Ein bisschen Realitätsfremd sind manche Sachen schon. So validiere ich nur noch transitional, weil nicht einsehe, auf zB target zu verzichten.

Viele Grüße aus Frankfurt/Main,
Patrick

[MudGuard]

Hi,

Aber eben diese Def. stellt die Frage, was ist ein Rahmen? Ist es um oder auf? IE macht einen Rahmen _um_ das DIV, die Definition will es aber so, dass der Rahmen _auf_ das DIV kommt (was ist logischer?... Auslegungssache?...).

Ne: "In terms of the box model, "background" refers to the background of the content and the padding areas. Border colors and styles are set with the border properties. Margins are always transparent so the background of the parent box always shines through.

Der IE macht es richtig!

Nein, siehe mein anderes Posting.

cu,
Andreas

[Thomas J.S.]

Hallo Andreas,

Der IE macht es richtig!

Nein, siehe mein anderes Posting.

Ich sehe das anderes, aber ich werde darüber _nicht_ diskutieren.
Solche unfruchtbare Diskussionen hatten wir schon ;-)

Grüße
Thomas

[Thomas J.S.]

... mir ist was eingefallen ...

es war eine Diskussion (ich habe die längst vergessen), die deine Sichtweise bestätigt.
http://lists.w3.org/Archives/Public/www-style/2001Jul/0155.html
lese aber bitte den gesamten Verlauf durch (die "Reply" linie)

Grüße
Thomas