18.06.2008
Browser stellen Abstände unterschiedlich dar
Wer Wert auf ein pixelgenaues Layout legt wird möglicherweise feststellen, dass verschiedene Browser manche Abstände unterschiedlich interpretieren. Das führt natürlich zu unterschiedlichen Darstellungen der Website und sollte vermieden werden.
Die beiden folgenden Screenshots zeigen den gleichen Quelltext, einmal im Firefox und einmal im Internet Explorer. Neben einem links-gefloateten Bild wurden sechs Textabsätze mit dem <p>-Tag eingefügt.
Wie man unschwer erkennt, benötigt der Firefox für die sechs Textabsätze eine geringere Höhe als der Internet Explorer. Die Ursache liegt darin, dass er für das Element p einen anderen Standardabstand als der Internet Explorer verwendet.
Das gleiche Problem kann auch bei Listen ul, li oder Überschriften h auftreten.
Die Lösung ist recht einfach, indem man die unterschiedlichen, browserinternen Vorformatierungen mit dem Universalselektor "*" auf "Null" setzt und somit einheitlich für alle Browser definiert. Die erforderliche CSS-Angabe dafür lautet:
* {
margin: 0;
padding: 0;
}
Man spricht auch von einem sogenannten "CSS-Reset" oder dem Zurücksetzen der Browservorgaben für Außen- und Innenabstände.
Allerdings führt dies dazu, dass nun die entsprechenden Elemente keine Abstände mehr haben, was nicht unbedingt gewollt ist.
Folglich müssen diese wieder einheitlich hinterlegt werden, etwa indem wir für unser Beispiel noch für das Element p folgenden Abstand hinterlegen:
p {
margin: 15px 0;
}
Mit diesen beiden CSS-Angaben erzielen wir folgende browsereinheitliche Darstellung:
