Alexs Blog

Viele Webdesigner kennen vielleicht das Problem, man entwickelt ein cooles Design mit passender Schriftgröße und dann wird die Schrift bei manchen Browsern unterschiedlich groß dargestellt. Ärgerlich.

Die falsche Voreinstellung der Schriftgröße im body-Tag ist hier der ausschlaggebende Grund. Eine bewährte Voreinstellung in CSS die bisher in allen Browsern (Internet Explorer, Firefox, Opera, Safari) einheitliche Resultate geliefert hat:

body {
font-size: 100.01%;
}

Warum eine solch komische Prozentzahl?

Für den Internet Explorer würde eigentlich die Angabe: body { font-size: 100%; } reichen. Leider tritt dadurch ein Fehler im Opera 6 auf, der den Text dadurch mikroskopisch klein darstellt. Ein Wert von 100.01% macht in Firefox und Safari keinen Unterschied, da diese den Wert abrunden. Es bringt aber den Opera 6 dazu, den Text in einer lesbaren Größe darzustellen.

Bei vielen flexiblen Websites wird auch oft die Voreinstellung: body { font-size: 1em; } oder body { font-size: 1.01em; } gewählt, aber diese Werte verursachen wiederum grobe Probleme im Internet Explorer.

Wie groß sind 100.01%?

Die Schriftgröße 100.01% entspricht 16 Pixel, dies ist natürlich für die meisten Websites zu groß. Abhilfe kann hier ein „Div-Container” schaffen, denn man um ganze Website legt wie z.B.:

<div id="container">
<p>Inhalt: die Website</p>
</div>

Über CSS weist man diesen Container dann eine kleinere Schriftgröße zu. Die hier definierte Schriftgröße wird dann an alle Elemente in diesem Container weitervererbt, also an die gesamte Website.

div#container {
font-size: 0.75em;  /* Entspricht 12px */
}