[matthiasmpk]

Ich hab ein simples? verständnisproblem mit der eigenschaft border im CSS

Hier mal mein Quelltext:

<div style="border: 3px solid green; width:200px; height:200px;">
<div style="border: 3px solid blue; width:100%; height:50px;">Test Text</div>
</div>

Es soll halt ne Blau umrandete Box in einer Grün umrandeten Box dargestellt werden.
Die blaue Box soll dabei 100% Breite haben.

Funktioniert im IE fantastisch aber im FF

Hat wer ne Idee wie ich das ummodle damit es im FF so aussieht wie im IE?

[Witi]

Da der Firefox sich im Gegensatz zum IE eher an die Webstandards hält, würde ich behaupten, dass FF es richtig macht und der IE falsch.

Der border zählt nicht zur Breite dazu und wird, wie man schön sieht, dazu addiert. Du kannst also so nicht direkt mit 100% Breite arbeiten.
Der Einfachheit halber könntest du bspw im äußeren Container ein "padding-right:3px" (2*3px des borders) einbauen.

Hier was zum Nachlesen: http://www.css4you.d...dell/index.html

[gr4y]

Zitat (matthiasmpk: 11.02.2008, 08:07)

...

Es soll halt ne Blau umrandete Box in einer Grün umrandeten Box dargestellt werden.
Die blaue Box soll dabei 100% Breite haben.

Funktioniert im IE fantastisch aber im FF
...

Die Äußere Box hat 200 Pixel breite, die Innere Box richtet sich nach der Breite der Äußeren Box und ist demnach 100%!! Wenn es im Internet Explorer funktioniert muss das nicht heißen das es Standardkonform ist!

Ich habe deinen Quellcode jetzt mal getestet! Bei mir funktioniert der genau so wie er dasteht.
Die Innere Box mit Blauem Rahmen ist genau 100% der Äußeren Box! Allerdings wird hier die Border wie es auch sein sollte dazu addiert!

Zumindest wenn man den DocType XHTML 1.0 Transitional benutzt. Wenn man das weglässt, dann wird der blaue Rahmen im IE nicht dazu addiert!

So sieht das mit dem DocType aus:

Dieser Beitrag wurde von gr4y bearbeitet: 11. Februar 2008 - 08:42

[matthiasmpk]

Danke euch 2 für die Aufklährung.

Also ich dachte dass das Boxmodell genauso ist wie das Fenstermodel von Windows,
is wohl aber nich so

Naja mit dem "padding-right:3px" hab ichs probiert aber dann spinnt der IE wieder rum.

Ich hab die lösung aber jetz ... glaub ich mal.

Hab so rumprobiert und hab "width:100%" geändert in "width:100%-3px" und siehe da es funktioniert in beiden Browsern
Und wieso funktionierts?
Ganz einfach weil "width:100%-3px" totaler Käse ist
Der Browser ignoriert diese Deklaration einfach.
Also hab ich die "width" anweisung weggelassen und schon ging's.

Ja wiso sacht mir das ke Sau, das ich width für 100% Breite garnich setzen muss