Border px beachten?

[Tobias]

Hallo,
wenn ich ein DIV Gerüst bastel z.b. Fixed Width CSS Layouts - 1 Column - fw-6-1-col

Und ich nun aber um jeden DIV jeweils ein 5px dicken Border haben will, muss ich die in der css angegebene Breite etc. berücksichtigen bzw. "abziehen"?

 

[BcF]

Ja, Rahmenbreite wird zur Breite hinzuaddiert (außer im IE6 soweit ich weiß). Das heißt du müsstest logischerweise das, was du an Rahmen hinzufügst von der Breitenangabe (wenn es denn eine feste ist) abziehen. Sonst wird es breiter.

 

[cain]

stimmt... BcF hat recht Tobi...

Ich hatte das problem, dass es dann von browser zu browser unterschiedlich angezeigt wird....

 

[semitarius]

IE-Browser >= 6.0 berechnen das Box-Model anders als im W3C festgelegt.

Wie das Box-Model definiert wird kannst Du unter : SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell nachlesen.

Für die äteren IEs wirst Du entweder mit einer Browserweiche, CSS-Hacks oder Conditional Comments arbeiten müssen.

Gruss
c.b

 

[Tobias]

aber wenn ich überallgleichmäßig den Border verändere ist das doch egal oder?

 

[semitarius]

aber wenn ich überallgleichmäßig den Border verändere ist das doch egal oder?

Könnte aber zu Problemen führen beim Pixel schupsen ;)
(Der Bug beeinflusst auch Padding und Margin!)

Sauberes Authoring ist das berücksichtigen des Box-Bug, ersparst dir für die Zukunft Probs.

Ich benutze Conditional Comments um div. IE Bugs zu umgehen.
(Die noch hübsch in ein CDATA-Container gepackt und schon ist Alles valide )

 

[Efchen]

Moin zusammen,

ich muss Euch allen mal was klarstellen:
Es ist richtig, dass der Internet Explorer ein anderes Box Model kennt und benutzt. ABER, der Internet Explorer kennt auch das richtige Box Model!

Es ist NICHT nötig, Browserweichen wegen des Box Model Bug zu verwenden! Es reicht aus, den IE mit dem richtigen Doctype in den Standards Mode zu versetzen. Dann nutzt auch der IE6 schon das richtige Box Model.

Man sollte grundsätzlich immer jeden Browser in den Standards Mode versetzen, nur dann kann man erwarten, dass die Ergebnisse eines CSS-Layouts in allen Browsern ähnlich aussehen. Im Quirks Mode sind die Auswirkungen verschiedener Eigenschaften nicht normiert.

Also nix Browserweiche, nur Standards Mode!

Der Box Model Bug im IE sagt übrigens einfach nur, dass padding/margin/border bereits in width enthalten sind, beim richtigen Box Model errechnet sich die Breite (analog die Höhe) eines Elements durch margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.

Grüße,
-Efchen

 

[neuroleptika]

Box Model

Das war die wichtigste Korrektur des Internet Explorers.
Der ie5 / IE5.5 (Windows) hat border und padding bei der Elementenbreite einfach nicht berücksichtigt.

Kann ja jeder selber ausprobieren:
Box Model

@T0bias,
Wenn die Elemente durch border+width+padding nicht mehr in das Umschließende Element passen hat das natürlich Auswirkungen.
Im Zusammenhang mit float wird das Layout schnell zerschossen.
Umgekehrt, also beim fehlerhaften Boxmodel des IE5 sind die Auswirkungen meist nicht so schlimm aber durch den Einsatz von background oft unschön.