IE für Win intepretiert div-padding anders

[Saugkraft]

Hallo NG,

nachdem mir durch die ganze Fehlersuche der Kopf raucht, mal ne Frage an die Experten..

Ich habe ne Seite mit verschachtelten divs.

Ein Elterndiv in dem per float: left; zwei Inhaltsdivs nebeneinander sind.
Elterndiv soll 780px breit sein, die Inhaltsdivs 150 und 630 (150 + 630 = 780). Das 630er Inhaltsdiv soll ein padding von 15px haben.

Wenn ich das so programmiere, wird es im IE für Win korrekt angezeigt. In Firefox, Safari und Opera sind die beiden Inhaltsdivs zu breit, so dass sie untereinander erscheinen.

Ergo habe ich das 630er div auf 600 verkleinert (150 + 600 + padding links 15 + padding rechts 15 = 780). Damit wird's in Firefox, Safari und Opera korrekt angezeigt, im IE ist das 600er div dann aber zu schmal.

Meine Frage: Interpretieren die Browser unterschiedlich oder hab ich möglicherweise nen Denkfehler drin?

Bei Interesse: der Quellcode liegt unter www.mpa.uni-kassel.de/china/index.html, die css Datei heißt www.mpa.uni-kassel.de/china/china.css

(und ja, ist ein angepasstes Rapidweaver css, soll da dann auch als Theme wieder rein , aber erstmal muss die Seite laufen)

 

[joachim14]

Ohne mir Deine Seite weiter angesehen zu haben: Der IE ist bekannt und berüchtigt dafür, dass er hier anders interpretiert (bei einigen anderen Dingen auch noch).
Deshalb bittet Microsoft für den kommenden IE 7 ja auch, alle Webseiten ohne IE Spezilitäten umzuschreiben. Offenbar möchte man sich doch einmal den allgemeinen Gepflogenheiten anschließen. (kein Witz)

Für die Besonderheiten von IE ist zB die Darstellung von http://de.selfhtml.org/ ganz nützlich

 

[dms]

Bevor Du Dir nen Wolf suchst: http://de.selfhtml.org/css/formate/box_modell.htm#box_model_bug

 

[Jakob]

Beste Lösung ist sicherlich so gut es geht auf padding und margin oder gleich pixelbasiertes Layout zu verzichten. Klar geht das manchmal garnich, dann ist meiner Meinung nach die beste Lösung diese (von dms Link):

#bereich {
  width:200px; padding:20px; border:20px solid #66a;
}

* html #bereich {  /* nur fuer Internet Explorer */
  width:280px;     /* Version 5.x */
  w\idth:200px;    /* Version 6 */
}

 

[dms]

Finde ich ganz schlimm, solche CSS-Hacks. Gerade für den IE gibt es auch Methoden um gezielt Möglichkeiten und nicht Schwachstellen von Browsern auszutzen.

<style type="text/css">
/*<![CDATA[*/
#bereich {
   width:200px;
   padding:20px;
   border:20px solid #66a;
}
/*]]>*/
</style>
<!--[if IE 5]>
<style type="text/css">
/*<![CDATA[*/
#bereich {
   width:280px;
}
/*]]>*/
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
#bereich {
   width:200px
}
/*]]>*/
</style>
<![endif]-->

 

[Jakob]

Schwierig beim IE zwischen Möglichkeit und Schwachstelle zu unterscheiden

Dein Weg ist sicherlich der „richtigere“ jedoch bevorzuge ich in dem Fall den Hack.
Ich benutze keine CSS-Hacks bis auf den oben, da er wenn das Box Model einheitlich ist (wohl so in einem Jahr), sehr leicht entfernt werden kann und keine Probleme bereiten kann (die richtige Breitenangabe wird ja als letztes gesetzt), im Gegensatz zu vielen anderen Hacks.

Wie ist es eigentlich bei den conditional rules, wenn sich z.B. der Opera als IE ausgibt?

 

[dms]

Opera springt darauf nicht an.

[...]da er wenn das Box Model einheitlich ist (wohl so in einem Jahr), sehr leicht entfernt werden kann[...]

Kann man denn aber von Entfernen sprechen? Man optimiert doch nicht immern nur auf die aktuellste Browserversion. Mit den IE-Abfragen hast Du absolut keinen Aufwand in der Zukunft. Der neue IE wird nicht drauf anspringen (es sei denn die Redmonder beweisen mal wieder Ihre Fähigkeiten ) sondern die allgemeingültigen Regeln verwenden.

 

[Saugkraft]

Ja spitze. Es funktioniert. Vielen Dank! Ich wusste doch, dass sich hier geballtes Fachwissen konzentriert.

Der IE 6 hat das Darstellungsproblem übrigens genauso. Habe mich dann für <!--[if lte IE 6]> entschieden.

Achja.. Habe den Style jetzt in den .html Quelltext in den Header gepackt. Gibt es ne Möglichkeit, die if Abfrage in der .css Datei zu verwursten?

 

[dms]

Ist mir nicht bekannt, ausser natürlich mit dem CSS-Hack. Ich verwende immer eine extra IE.css die ich über solch ein Conditional Comment einbinde.

 

[Saugkraft]

Das ist natürlich auch eine Maßnahme. Manchmal liegt die Lösung so nahe.

Damit lassen sich dann ja auch gleich diverse andere Kleinigkeiten ausbessern. Eigentlich unglaublich, was Microsoft da.. aber das Thema zu erörtern lohnt sich ja nicht wirklich.

Mit Vista wird bestimmt alles besser. *hüstel*

 

[dms]

Mit Vista wird bestimmt alles besser. *hüstel*

Utopie! Nein, ich glaube es wird niemals besser. Es gab und wird bestimmt auch immer mangelhafte Browser geben. Früher war es der Netscape 4, jetzt ist es der IE 5/6.
Und selbst wenn der neue IE ein anständiger und standardkonformer Browser wird, die alten Versionen verschwinden dadurch ja nicht. Es gibt immerhin auch heute noch Leute die auf Netscape 4 optimieren.

Ein echter Segen wäre es wenn alle Browserhersteller solche Conditional Comments einführen würden. So wäre es echt recht leicht und ohne riesen Aufwand möglich den Bugs der einzelnen Browser (und jeder Browser hat welche, wenn auch nicht im Ausmaaß wie der IE) entgegenzuwirken.