nicht angemeldet
Unterschiedliche Interpretation zwischen IE7 und FF2
Hallo zusammen,
ich habe hier ein Problem mit der unterschiedlichen Interpretation von CSS Angaben im IE7 und FF2.
Gegeben ist folgender HTML Code:
<html>
<head></head>
<body>
<div align="center">
<div style="width:600px;padding:15px;background-color:#FF0000;">
<div style="width:100%;background-color:#0000FF;">Test</div>
</div
</div
</body>
</html>
Im IE7 wird nun der äußere Div Block in einer Breite von 600px dargestellt. Der innere Block, der mit einer Breite von 100% definiert ist, belegt bedingt durch die Padding Angabe eine Breite von 570px.
Im FF wird der äußere Block jedoch mit 630px ausgegeben und der innere erhält eine Breite von 600px, was meiner Ansicht nach falsch ist, da ich für den äußeren Block ja eine feste Breite von 600px vorgegeben habe.
Ist dieses Verhalten ein Fehler vom FF2? Oder doch vom IE? Und wie kann das Problem gelöst werden, dass beide Browser sich gleich verhalten? Gibt es noch weitere CSS Angaben, mit denen ich sicherstellen kann, dass der äußere Block definitiv nur 600px breit sein wird?
Schonmal vielen Dank für Eure Unterstützung!
Grüße
Preachie
-
Hi,
Ist dieses Verhalten ein Fehler vom FF2? Oder doch vom IE?
vom IE bzw. eigentlich eher von Dir, weil Du ihn ohne entsprechenden DOCTYPE in den Ratemodus versetzt, wo er das fehlerhafte IE-Boxmodell verwendet.
freundliche Grüße
Ingo-
Schonmal Danke für Deine Antwort.
vom IE bzw. eigentlich eher von Dir, weil Du ihn ohne entsprechenden DOCTYPE in den Ratemodus versetzt, wo er das fehlerhafte IE-Boxmodell verwendet.
Wieso ist es denn aber ein falsches Verhalten, wenn er den Div Block 600px breit macht, wenn ich genau das definiere? Mit den Padding-Angaben definiere ich doch nur den Innenabstand, so dass Blöcke innerhalb des Außenblocks bei 100% Breite 570px breit sein müsste.
Wie erreiche ich denn dann sonst das gewünschte Ergebnis, dass der Außenblock 600px breit ist und einen Innenabstand von je 15px hat und dass der Inhalt dieses Blocks bei 100% Breite exakt 570px breit ist?
-
Hi,
Wieso ist es denn aber ein falsches Verhalten, wenn er den Div Block 600px breit macht, wenn ich genau das definiere? Mit den Padding-Angaben definiere ich doch nur den Innenabstand, so dass Blöcke innerhalb des Außenblocks bei 100% Breite 570px breit sein müsste.
Weil nach der Spezifikation das padding zur Breite hinzugerechnet wird. Microsoft sah das früher lieber so wie Du und hat sich erst mit dem IE 6 dazu entschieden, der Spezifikation zu folgen.
Wie erreiche ich denn dann sonst das gewünschte Ergebnis, dass der Außenblock 600px breit ist und einen Innenabstand von je 15px hat und dass der Inhalt dieses Blocks bei 100% Breite exakt 570px breit ist?
Das hast Du doch gerade schon ausgerechnet. Gebe der Box die 570px.
freundliche Grüße
Ingo-
Das hast Du doch gerade schon ausgerechnet. Gebe der Box die 570px.
Oder ich lasse die Padding-Angabe weg und arbeite mit margin:15px auf den Inhaltsblöcken...
Wie dem auch sei, vielen Dank für Deine Antworten! Wieder etwas dazugelernt ;)
Gruß
preachie-
Hi,
Oder ich lasse die Padding-Angabe weg und arbeite mit margin:15px auf den Inhaltsblöcken...
margin und padding sind signifkant unterschiedliche Bereiche: Nicht nur dass sie sich an verschiedenen Stellen einer Box befinden, sie werden auch von unterschiedlichen Eigenschaften beeinflusst. Die background-Eigenschaft beispielsweise bezieht sich auch[1] auf die Padding-Area. Hinzu kommt das Phänomen der Collapsing Margins, welches es bei Paddings nicht gibt. Deine Entscheidung hat also weitreichende Konsequenzen.
Ebenso wie die Entscheidung, den IE durch Verzicht auf einen ordentlichen DOCYTPE in den Quirks-Mode zu versetzen. Wer das tut, sollte *sehr* genau wissen, was das bedeutet; und dies scheint mir auf Dich nicht zuzutreffen. Fazit: Bleibe beim Padding und bringe dem IE per DOCTYPE bei, sich etwas weniger falsch zu verhalten.
Cheatah
[1] Sogar die Border-Area ist vom Background hinterlegt.
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Fazit: Bleibe beim Padding und bringe dem IE per DOCTYPE bei, sich etwas weniger falsch zu verhalten.
Danke,
habe mich nun auch für diese Variante entschieden ;)
Wobei sogar ein DOCTYPE gesetzt war (zumindest in dem Originalcode, nicht in meinem Sample), was mich eben so verwirrt hat, allerdings stand eine Zeile vor der DOCTYPE Definition noch ein Kommentar, wodurch der DOCTYPE ignoriert wurde... sonst hätte es diese ganze Verwirrung erst gar nicht gegeben.Vielen Dank an alle!
Preachie
-
Hi,
Wobei sogar ein DOCTYPE gesetzt war (zumindest in dem Originalcode, nicht in meinem Sample), was mich eben so verwirrt hat, allerdings stand eine Zeile vor der DOCTYPE Definition noch ein Kommentar, wodurch der DOCTYPE ignoriert wurde...
der Quirks-Mode ist der "huch, ich glaube, der Autor dieses Dokuments hatte keine Ahnung"-Modus. Setzt der Autor einen hinreichend günstigen DOCTYPE ein, glaubt der Browser (beginnend beim IE 6), dass der Autor Ahnung hatte. Allerdings ist der IE zu doof zum Kacken: Er selbst hat nun wirklich *gar* keine Ahnung und glaubt, der DOCTYPE müsse unbedingt in der ersten nicht-leeren Zeile stehen.
In anderen Browsern sind derlei Probleme vollkommen unbekannt, und auch der Quirks-Mode wirkt sich i.a.R. nur durch eine erweiterte Fehlerkorrektur aus (z.B. werden Farbcodes ohne vorangestelltes "#" und Schriftgrößen ohne Einheit akzeptiert), nicht aber durch Fehlverhalten wie beim IE.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
Hi,
Wieso ist es denn aber ein falsches Verhalten, wenn er den Div Block 600px breit macht, wenn ich genau das definiere? Mit den Padding-Angaben definiere ich doch nur den Innenabstand, so dass Blöcke innerhalb des Außenblocks bei 100% Breite 570px breit sein müsste.
Weil nach der Spezifikation das padding zur Breite hinzugerechnet wird.genauer gesagt bezieht sich width auf die Content-Area, also einen Bereich, der sich _innerhalb_ des Innenabstandes befindet. Hinzugerechnet wird da eigentlich gar nichts.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-