Padding-Darstellung im IE und Firefox sind unterschiedlich: Unterschied zwischen den Versionen
Franky (Diskussion | Beiträge) |
Franky (Diskussion | Beiträge) |
||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 14: | Zeile 14: | ||
oder | oder | ||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | <!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 [http://de.selfhtml.org/html/allgemein/grundgeruest.htm diese Seite auf de.selfhtml.org]! | Siehe auch [http://de.selfhtml.org/html/allgemein/grundgeruest.htm diese Seite auf de.selfhtml.org]! | ||
| Zeile 21: | Zeile 23: | ||
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. | 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 [http://www.jquery.com jQuery] zurückgreifen. | |
| − | |||
| − | |||
== Nützliche Links == | == Nützliche Links == | ||
| Zeile 29: | Zeile 29: | ||
* [http://de.selfhtml.org/html/allgemein/grundgeruest.htm Grundgerüstdefinition auf de.selfhtml.org] | * [http://de.selfhtml.org/html/allgemein/grundgeruest.htm Grundgerüstdefinition auf de.selfhtml.org] | ||
* [http://www.firefox-browser.de DER Browser für Programmierer ;-)] | * [http://www.firefox-browser.de DER Browser für Programmierer ;-)] | ||
| + | |||
| + | |||
| + | [[Kategorie:CSS]] | ||
Aktuelle Version vom 12. September 2012, 09:35 Uhr
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.
