Für mehr Infos
bitte auf die Grafik unten klicken.
Der Problemfall "Internet-Explorer"
Im "normalen" Leben wird der, der sich nicht an Regeln hält, bestraft.
Die internationale Kommission W3C hat Standards z.B. für CSS vorgeschrieben, an die sich die Microsoft Corp. mal wieder nicht hält!? Nein, Microsoft meint wohl mal wieder, dass sie die Vorschriften diktieren würden.
Aus diesen Gründen sollten alle den Internet Explorer, besonders in der Version 6, von ihren PCs verbannen und durch einen korrekt arbeitenden Browser wie Firefox / Mozilla, Opera oder Safari ersetzen.
Mit dem IE7 nähert sich MS langsam dem internationalen Standard.
Mit dem IE8 scheinen sie es geschafft zu haben.
Ein Beispiel: Das Box-Modell-Problem
Eine Tabellenstruktur besteht aus rechteckigen Zellen mit Rechtecken. Eine CSS-Box kann man sich vorstellen als Tabelle mit nur einer Zelle. Dieser Box kann man Ränder (border), Außenabstände (margins hält Abstand zu Nachbarelementen), Innenabstände (paddings halten Abstand des Box-Inhaltes vom Rand) mitgeben. Das kann man u.a. separat jeder Seite der Box zuordnen. Innerhalb der Innenabstandsangabe (padding) befindet sich der Inhaltsbereich, der, Sie vermuten es schon, den eigentlichen Inhalt aufnimmt.
Falls der Box keine Dimensionen, Breiten und Höhen, mitgegeben werden nennt man sie "fließend" ("fluid" oder "liquid"). Der Inhalt bestimmt die Breite und die Höhe einer solchen Box. Für die meisten Fälle sind solche "fließenden" Boxen sehr zuverlässig.
Aber nehmen wir an, Sie geben der Box eine Breite und/oder eine Höhe mit. Diese Eigenschaften nennt man "width" und "height". Aber was ist das genau, die "Breite" unter Berücksichtigung von "margin", "padding", "border" und des "Inhaltsbereichs"!?
Die internationale Standardkommission W3C, dass die Breite das ist, was zwischen dem linken und rechten Innenabstand (padding) steht. Falls keine padding angegeben wurde, dann ist die Breite der Abstand zwischen dem linken und rechten Rand (border).
Etwas näher betrachtet
Wir wollen eine einfache Box definieren und sehen, wie sie sich verhält. Boxen werden als "Block"-Element betrachtet. Jedes Blockelement beginnt im Browser mit einer neuen Zeile. Blockelemente von "Geburt an" sind u.a <table>, <p>, <blockquote>, <ul>, <li>, und das <div>.
So definieren wir diese Box:
<body> <div> Dies ist der eigentliche Boxinhalt </div></body>
... und geben ihr dieses CSS:
div { width: 100px; padding: 10px; border: 5px solid black; margin: 10px; }
Links sehen Sie das Ergebnis des o.a. Codes. Die Breite ist mit 100px angegeben, währenddessen die Höhe variable blieb, so dass sie vom Inhalt bestimmt wird.
Bemerkung: Das MARGIN und das PADDING ist normalerweise unsichtbar, transparent. Wir haben sie hier nur zum besseren Verständnis eingefärbt.
Gemäß dem internationalen Standard des W3C ist die Breite von 100 Pixeln der Bereich zwischen den grauen Padding-Zonen. Der Innenabstand (padding), die Randbreite (border) und der Außenabstand (margin) werden hinzu addiert, so dass die gesamte Box im Endeffekt eine Breite von 130 Pixeln für den sichtbaren Bereich und komplett eine Breite von 150 Pixeln hat (der Außenabstand kommt noch dazu).
Microsoft mit ihrem Internet-Explorer (weiter nur noch als IE bezeichnet) sah das mal wieder anders und machte seine eigene Breitenberechnung auf. Von der Breite von 100px zogen sie dann eben mal den Innenabstand und die Randbreite ab, so dass für den eigentlichen Inhalt dann nur noch 70 Pixel übrig blieben. Permanente Verschiebungen in der Darstellung in unterschiedlichen Browsern waren das Ergebnis. Das ist für jeden Webentwickler ein großes Ärgernis. Für solche Fehler muss jedes mal ein zusätzliches ie-hack.css erstellt werden um sie zu korrigieren.
Glücklicherweise hat MS diesen seinen Fehler eingesehen und ihn im IE6 korrigiert aber leider nur im sogenannten "standard mode" und nicht im "quirks mode".
Das war nur mal ein Problem mit diesem unrühmlichen Internet-Explorer um Ihnen mal zu verdeutlichen, dass ein Wechsel zu den guten und korrekt arbeitenden Browsern wie Firefox, Mozilla und Opera sehr empfehlenswert ist!
