Padding-Darstellung im IE und Firefox sind unterschiedlich
Inhaltsverzeichnis
Problembeschreibung[Bearbeiten]
Der Code
<div style="width: 40px; height: 40px; padding: 2px 2px 2px 2px;"></div>
erzeugt im Internet Explorer eine andere Darstellung als im Firefox - eine Box mit unterschiedlichen Größen. Im Internet Explorer hat die Box eine Breite von 40 Pixel und eine Höhe von 40 Pixel, der Firefox dagegen zeigt den Kasten 44 Pixel x 44 Pixel an.
Lösung[Bearbeiten]
Es scheint, als würde der IE korrekt arbeiten, doch verhält sich in diesem Fall der Firefox lt. CSS-Spezifikation richtig. Er addiert zur Breite und Höhe die 2px auf jeder Seite hinzu (siehe Artikel auf de.selfhtml.org). Um die Darstellung in anderen Browsern wie Opera und Internet Explorer entsprechend zu korrigieren, sollte folgender Doctype verwendet werden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
oder gleich HTML 5
<!DOCTYPE HTML>
Siehe auch diese Seite auf de.selfhtml.org!
ACHTUNG bei Verwendung von JavaScript[Bearbeiten]
Durch die Verwendung der oben genannten Doctype Angaben werden bei Javascript manche Eigenschaften nicht mehr richtig zurückgegeben. Beispielsweise liefert document.body.offsetHeight oder document.body.clientHeight anstatt der Höhe des Browserfensters die Höhe des Inhalts. Dadurch können Layer nicht mehr dynamisch zentriert werden.
Hier sollte man auf die entsprechenden Funktionen eines Frameworks, wie z.B. bei jQuery zurückgreifen.
