Moin,

beim rumbasteln mit CSS ist mir etwas für meinen Geschmack sehr Merkwürdiges aufgefallen, worüber sich auch die offiziellen Specs nicht auslassen (bzgl. der Implementierung in den Browsern). Es geht um folgendes:

Ich habe einen <div> Bereich, den ich absolut positioniere und der Text enthalten soll. Der div wird exakt in die rechte obere Ecke des Clientbereichs gesetzt und erstreckt sich dann 200 Pixel nach links und 90 Pixel nach unten. Von Haus aus ist dort erstmal alles 0, was margin, padding und border betrifft. Margin und border brauche ich nicht, ich muß nur dafür sorgen daß ich mit padding einen Innenabstand von 5 Pixel habe, damit der Text nicht so an den Rand gequetscht aussieht. Soweit klar, hier der Code:

Quellcode:div.textbox
[
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    height: 90px;
    padding: 5px;
} Das Problem ist: Ich gehe davon aus, daß wenn die Dimension des padding Bereichs (l+r = 10px und t+b = 10px) kleiner ist als die Dimension des Boxbereichs (was ja der Fall ist) , dann sollte doch der Text auch in einem padding Bereich von (w-(l+r), h-(t+b)) sprich (200-(5+5), 90-(5+5)) = 190, 80 angezeigt werden. Dieser Vorgang wird vom IE 5.5 auch gemacht, dagegen passiert bei Firefox und Opera genau das Gegenteil:

Der padding Bereich entspricht dort nun exakt der ursprünglichen Dimension und es werden links, rechts, oben und unten die padding Werte auf die Dimension aufaddiert, so daß ich im Endeffekt eine Box habe, die 210, 100 Pixel groß ist und einen padding Bereich von 200, 90 Pixel besitzt. Imho Das kann bei nachfolgenden, relativen Positionierungen zu dieser div-Box für Chaos sorgen.

Ich weiß nicht, wer nun Recht hat, aber ich denke daß FF und Opera auf der Siegerseite stehen, obwohl (!) es mir so erscheint daß IE es richtig(er) macht...

Weiß jemand Details?

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)

http://www.css4you.de/wsboxmodell/index.html
bzw einfach nur
http://www.css4you.de/wsboxmodell/iebox.gif

Was der IE macht ist falsch. Der Firefox produziert das was nach Standard das Richtige ist.

/edit
Die eckige Klammer ist nur nen Typo?!

"[...] you're going to burn in a very special level of Hell. A level they reserve for child molesters and people who talk at the theater." - Book

Sorry, Tippfehler, sollte ein { sein...

Ok, die Breite/Höhe ist also die Summe aller anliegenden Komponentendimensionen. Nun gut, thx und weiter geht's :)

Btw. gute Seite!

K:R-I)Z++
"CSS ist cascading style sheets. Und nicht so'n Ranzspiel." - dp
In memory of Voice († 2005/03/30)