Problem mit CSS und den verschiedenen Browsern

[alcaeus]

Moin,

vielleicht faengst du mal mit validem Code an:

Code:

<style type="text/css"

Attributwerte werden mit " umschlossen, nicht mit '.

Nehmen wir folgenden Code an (Ausschnitte):

Code:

<div id="myContainer">Ich bin ein Blindtext</div>

mit folgendem Style:

Code:

<style type="text/css">
#myContainer {
  background-image:url(deine_url);
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:scroll;

  padding:10px 30px 10px 200px;
  height:170px;
  width:500px;

  font-size:14px;
}
</style>

Sieht etwas aufgeraeumter aus, und funktioniert nicht sicher. Warum? Wirf einen korrekten DOCTYPE mit DTD in die HTML-Datei. Alles andere zwingt die Browser teilweise in den Quirks-Mode, und dann bist du um es mal ehrlich zu sagen, am A****.

So, was ist jetzt das Problem? richtig: die Groesse passt nicht. Laut dem Box-Model der CSS2-Definition wird die Gesamtbreite eines Elements aus width + leftPadding + rightPadding + leftBorder + rightBorder + leftMargin + rightMargin berechnet. Das heisst, dass deine Box insgesamt 730px * 190px gross sein wird, wobei "nur" 500px * 170px fuer Text verfuegbar sind. Das musst du natuerlich beachten, denn der IE machts im Quirks-Mode anders; da werden padding, border und margin von der Breite abgezaehlt, und daraus wird die verfuegbare Breite fuer Text errechnet.

@Boombuler: sowas ist einfach overkill. Wenn man sauberes HTML und CSS schreibt, braucht man solche (IMO schwachsinnige) Scripte erst gar nicht.

Greetz
alcaeus