Problem mit CSS-Anpassung der Schriftgrößen

[bminor]

Ich erstelle meine erste Contao site auf privatdetektivstuttgart.de/contao (der Domainname hat mit dem Inhalt nichts zu tun. Das ist nur eine "Wegwerfdomain", die ich zum Üben verwende).

Ich habe für die Startseite ein eigenes einspaltiges Layout. Für die übrigen Seiten ein 2-spaltiges Standard Layout.
Der Header soll in beiden Layouts identisch sein. Ich verwende 2 unterschiedliche Stylesheets für die beiden Layouts aber die Abschnitte für den Header habe ich 1:1 vom Startseiten Stylesheet in das Standard Stylesheet rüberkopiert.

Was ich nicht verstehe, ist, dass die Schriftgrößen unterschiedlich dargestellt werden, obwohl in beiden Stylesheets z.B. font-size für die obere Zeile rechts im Header als 1.1em angegeben ist. Für die Zeile darunter 1.2em. Auf der Startseite kommt die Schrift kleiner raus (in dem Fall die gewünschte Größe).

Dadurch, dass die Schrift auf den anderen Seiten größer dargestellt wird, rutscht mir die Hauptnavigation um ein paar Pixel nach unten, was dann vor allem auf der Kontaktseite total blöd ausschaut.

Die Größe der Schrift in der Navigation bleibt deshalb gleich, weil ich sie statt in em in pt im Stylesheet stehen habe.

Auch im Footer ist font-size jeweils mit 1em angegeben aber es kommt unterschiedlich raus.

Eine Lösung dafür habe ich eigentlich schon gefunden. Wenn ich im Standard Stylesheet 10pt statt 1.1em angebe und in der Zeile darunter 12pt, dann passt alles. Aber ich würde das Layout gerne so flexibel wie möglich gestalten. Und außerdem würde ich auch gerne verstehen, was die Ursache für dieses Problem ist. Soweit ich weiß, bedeutet die Einheit em eine relative Größe bezogen auf die vom Browser verwendete Standard Schriftgröße. Wenn also im selben Browser auf verschiedenen Seiten die Schrift bei gleicher relativer Größenangabe unterschiedlich groß dargestellt wird, würde das je der Logik nach bedeuten, dass der Browser für verschiedene Seiten auch unterschiedliche Standards verwendet. Und soweit ich sehen kann, tritt das nicht nur bei einem Browser auf, sondern sowohl bei FF als auch bei IE und Chrome.
Oder es funken mir irgendwelche anderen Styleangaben dazwischen, von denen ich nichts weiß.

Für eine erleuchtende Antwort wäre ich sehr dankbar.
Klaus

PS. Noch als zusätzliche Info: Ich habe in beiden Layouts den Punkt CSS-Reset nicht aktiviert. Wenn ich das tue, dann wird die Schrift auf den anderen Seiten noch größer.

[Bas]

Auf der Startseite hast Du folgendes:

body {
    font: 81.25% Arial,Helvetica,sans-serif;
}

Auf den Folgeseiten nicht. EM ist ne relative Maßeinheit .. und wenn Du in den Body ein font-size:81.25% setzt werden alle Schriften der Kindelemente entsprechend verkleinert.

[bminor]

Tja, hab mir schon gedacht, dass ich was ganz einfaches übersehen habe. Aber manchmal sieht man den Wald vor lauter Bäumen nicht mehr.

Vielen Dank auf jeden Fall für die schnelle und hilfreiche Antwort.

Klaus