Interpretation von Schrift-Definitionen in IE und Firefox

[Stefan Beyer]

Liebe Forumer,

mir bereitet meine CSS-Datei Sorgen. Hachseufz... Meine Internetseite sieht in Firefox wie bestellt aus; im Internet Explore hingegen sind alle Schrifttypen jeweils eine Einheit zu groß - wodurch das komplett Layout kaputt geht. (Naja - nicht komplett kaputt, aber durchaus beschädigt wird.)

Nun geht es hier nicht um ganz unterschiedliche und kleinste DIfferenzen, sondern allein um den Unterschied einer Schriftgrößeneinheit. Also: schalte ich im Internet Explorer im Menü "Ansicht" die Schriftgrößen allgemein von "mittel" auf "kleiner", stimmt wieder (fast) alles, und die Seite schaut (fast) aus wie im Firefox.

Hallo? Das kann doch wirklich nicht sein. Ich bin ratlos, wie und wo ich den Fehler suchen soll: die CSS-Datei stammt von einem Designer der BLOGGER-Vorlagen, und bei dessen Variante klappt alles. Nun, in meiner von mir angepassten und umgestalteten Blog-Seite tritt nun aber dieses Problem auf. Wah! Ich hatte doch an diesen Dingen gar nichts verändert..!

Gibt es vielleicht einen "klassischen Fehler", der oft gemacht wird, und um den es sich hier handelt? Könnte mir vorstellen, dass diese Macke viele Leute schon erlebt haben.

Hat jemand einen Tipp?

Liebe Grüße & danke fürs Lesen der langen Klage,

Stefan

[Ingo Turski]

Hi,

Gibt es vielleicht einen "klassischen Fehler", der oft gemacht wird, und um den es sich hier handelt?

Ja, sogar mehrere.
Kleinere Unterschiede können bei Angaben in em durch Rundungsunterschiede auftreten. Größere Unterschiede z.B. wegen mangelnder Vererbung.

freundliche Grüße
Ingo

[Orlando]

Hallo Stefan,

Meine Internetseite sieht in Firefox wie bestellt aus; im Internet Explore hingegen sind alle Schrifttypen jeweils eine Einheit zu groß - wodurch das komplett Layout kaputt geht. (Naja - nicht komplett kaputt, aber durchaus beschädigt wird.)

Dann verwendest du wohl Pixel-Größen für das Layout. Verwende die Einheit http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=em, dann passt sich die Elementgröße der Schriftgröße an. Falls du Hintergrundbilder einsetzt, erstelle diese eine Spur größer, damit bei Skalierung des Schriftgrades keine Lücken auftreten.

schalte ich im Internet Explorer im Menü "Ansicht" die Schriftgrößen allgemein von "mittel" auf "kleiner", stimmt wieder (fast) alles, und die Seite schaut (fast) aus wie im Firefox.

Die Ausgangsgröße im Internet Explorer ist Schuld an der Misere, dass ein Großteil aller Websites eine Schriftgrößer kleiner als 100 % definiert. Das ist ein Teufelskreis, den es zu durchbrechen gilt.

Grüße
 Roland

[Ingo Turski]

Hi,

Die Ausgangsgröße im Internet Explorer ist Schuld an der Misere, dass ein Großteil aller Websites eine Schriftgrößer kleiner als 100 % definiert. Das ist ein Teufelskreis, den es zu durchbrechen gilt.

Nein. Der IE hat wie die meisten Browser haben 16px voreingestellt - und zu der ebenfalls meist voreingestellten Schriftart Times New Roman passt das recht gut bzw. ist mir sogar noch zu klein.
Die Misere (aber nicht das Problem hier) ist die noch fehlende Koppelung zwischen Schriftart und -gröeße.

freundliche Grüße
Ingo

[Stefan Beyer]

Hmmm - kompliziert.

Bei mir im CSS-Code heißt es gleich zu Beginn:

body {
  background:#ccc;
  margin:0;
  padding:20px 10px;
  text-align:center;
  font:10pt/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;
  }

Tsjoa...
Schwierich, das ganze, wie es scheint. Gibt's keene Lösung, diesen Browserdifferenzen mit ein paar Handgriffen beizukommen? Anderer Leute Webseiten sehen doch auch auf allen Browsern gleich aus.

Lg Stefan

Hi,

Die Ausgangsgröße im Internet Explorer ist Schuld an der Misere, dass ein Großteil aller Websites eine Schriftgrößer kleiner als 100 % definiert. Das ist ein Teufelskreis, den es zu durchbrechen gilt.
Nein. Der IE hat wie die meisten Browser haben 16px voreingestellt - und zu der ebenfalls meist voreingestellten Schriftart Times New Roman passt das recht gut bzw. ist mir sogar noch zu klein.
Die Misere (aber nicht das Problem hier) ist die noch fehlende Koppelung zwischen Schriftart und -gröeße.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

font:10pt/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;

Hilfe! Du solltest eine eigentlich für den Druck bestimmte Einheit nicht mit em mischen. gib mal statt pt einen passenden Wert in % an.

freundliche Grüße
Ingo

[Stefan Beyer]

Upsi - %-Angabe? Hilfe! :-)

Klappt irgendwie nicht. Vielleicht anstelle der pt einfach eine px-Angabe?

Ausprobiert habe ich: "font:60%/1.5em" - sieht genauso schräg aus, wie immer.

Aber doch schon einmal danke :).

Liebe Grüße,

Stefan

Hi,

font:10pt/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
Hilfe! Du solltest eine eigentlich für den Druck bestimmte Einheit nicht mit em mischen. gib mal statt pt einen passenden Wert in % an.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

Klappt irgendwie nicht. Vielleicht anstelle der pt einfach eine px-Angabe?

kommt drauf an, ob Du eine Skalierung im IE verhindern willst.
Auf jeden Fall solltest Du für font-size und line-height keine unvereinbaren Einheiten angeben.

Ausprobiert habe ich: "font:60%/1.5em" - sieht genauso schräg aus, wie immer.

60% kann doch kaum einer noch lesen.
Mein Tip: gib 100.1% an und für die zu formatierenden Elemente gewünschte Größen in em.

freundliche Grüße
Ingo

[Stefan Beyer]

Also beim Font das em weglassen? Und anstelle des em nur "100.1%"?

Eigentlich ist das schon Coden für Fortgeschrittene... Puh - sowas sollte man wohl wirklich Menschen überlassen, die sich mit sowas auskennen.

/Stefan

Hi,

Klappt irgendwie nicht. Vielleicht anstelle der pt einfach eine px-Angabe?
kommt drauf an, ob Du eine Skalierung im IE verhindern willst.
Auf jeden Fall solltest Du für font-size und line-height keine unvereinbaren Einheiten angeben.

Ausprobiert habe ich: "font:60%/1.5em" - sieht genauso schräg aus, wie immer.
60% kann doch kaum einer noch lesen.
Mein Tip: gib 100.1% an und für die zu formatierenden Elemente gewünschte Größen in em.

freundliche Grüße
Ingo

[Ingo Turski]

Hi,

Also beim Font das em weglassen? Und anstelle des em nur "100.1%"?

Du kannst auch eine line-height mit angeben, nur sollte diese wie gesagt zur Schriftgröße passen.
Nehmen wir mal 13px/1.5em: bei Voreinstellung im Browser von 16px wird eine 13px hohe Schrift in einer 24px hohen Zeile dargestellt. Das hat zwar viel "Luft", aber passt; anders herum ginge das jedoch nicht.
Aber der IE kann ja bekanntlich px nicht skalieren. Ändert man nun im IE den Schriftgrad, so ändert sich lediglich line-height und das passt dann nicht mehr so, wie gewüncht.

Fazit: gebe nur dann einen Wert für line-height an, wenn Du die "normalen" Zeilenhöhe (bzw. auch den Zeilenabstand) ändern willst, und achte darauf, dass der Wert zur font-size passt.
font-size:100.1% ist übrigens das gleiche wie font-size:1.001em - beseitigt aber Skalierungsfehler im IE. Es reicht allerdings hierzu aus, lediglich beim äußersten zu formatierenem Element % zu wählen.

freundliche Grüße
Ingo

[Stefan Beyer]

Puh... Also, so etwa?

text-align:center;
  font:13px/100.1% "Trebuchet MS",Verdana,Arial,Sans-serif;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;

Sorry - ich stelle mich echt dumm an :-). Ahem. Also: die Versuche mit px-Angaben ändern am Erscheinungsbild null und nichts. Der IE macht's Website-Willigen nicht gerade leichter...

Ich will dir selbstverständlich kein Ehremamt aufdrücken; aber ich poste dir mal kurz die Adresse, um welche es sich handelt:

http://www.stefanbeyer.com/index.php

Lädt man sie im Firefox, ist alles bestens, genau so, wie es sein. Lädt man sie im Internet Explorer, sind alle Schriften eine Einheit zu groß (sehr unschön), und in alleroberster Zeile (der Titelzeile mit Hintergrundgrafik) zerhaut's sogar das Design. Seufz :).

Ich bin ja durchaus zu Kompromissen bereit. D.h. vom bisherigen Design ein Kleinbißchen abzurücken, wenn dafür die Darstellung IE dadurch akzeptabel wird.

Liebe Grüße,

Stefan

[Ingo Turski]

Hi,

Puh... Also, so etwa?

text-align:center;
  font:13px/100.1% "Trebuchet MS",Verdana,Arial,Sans-serif;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;

ohje, was willst Du denn damit erreichen? Vor allem mit letzten beiden Regeln und dem unspezifischen Wert small? Mach da mal:

text-align:center; color:#333;
font:82% "Trebuchet MS",Verdana,Arial,Sans-serif;

draus.

freundliche Grüße
Ingo

[Stefan Beyer]

Danke für den Tipp!

Also, in Firefox sieht's noch immer gut aus. Aber ich habe leider gerade keinen Internetexplorer hier, um zu vergleichen. Wäre interessant zu sehen, ob das die Lösung gebracht hat.

Ich melde mich wieder :) *droh*.

Herzliche Grüße aus Leipzig,

Stefan

Hi,

Puh... Also, so etwa?

text-align:center;
  font:13px/100.1% "Trebuchet MS",Verdana,Arial,Sans-serif;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;

ohje, was willst Du denn damit erreichen? Vor allem mit letzten beiden Regeln und dem unspezifischen Wert small? Mach da mal:

text-align:center; color:#333;
font:82% "Trebuchet MS",Verdana,Arial,Sans-serif;

draus.

freundliche Grüße
Ingo

[Stefan Beyer]

Wow! Es funktioniert! Dankeschön!

Es gibt noch Mängel in den Anordnungen nach rechts, nach links etc. - aber das ist Kleinkram! Ich bin froh, dass die Schriftsache, und damit das große Layoutproblem, erledigt ist.

Hab vielen Dank!

Liebe Grüße,

Stefan

[Stefan Beyer]

Hallo Ingo,

na, ganz leicht kann ichs dann doch nicht lassen ;).

Ich habe ein Problem (was mit dem ursprünglichen aber nichts zu tun hat) mit der Anordnungen von Bild und Text:

http://www.stefanbeyer.com/archives/35

Zwei Bilder, darunter ein Text. In den CSS-Styles ist definiert float=left für alle jene Bilder. Wie kann es mir trotzdem gelingen, den Text UNTER den Bildern anordnen zu lassen, anstatt irgendwie krumm und schief daneben?

Hast du da einen Tipp?

Grüße,

Stefan

[Ingo Turski]

Hi,

Zwei Bilder, darunter ein Text. In den CSS-Styles ist definiert float=left für alle jene Bilder. Wie kann es mir trotzdem gelingen, den Text UNTER den Bildern anordnen zu lassen, anstatt irgendwie krumm und schief daneben?

na... entweder die Bilder nicht floaten lassen oder p{clear:left;}.

freundliche Grüße
Ingo

[Stefan Beyer]

na... entweder die Bilder nicht floaten lassen oder p{clear:left;}.

freundliche Grüße
Ingo

Funktioniert einwandfrei! :) Danke!

/Stefan

[MudGuard]

Hi,

Nehmen wir mal 13px/1.5em: bei Voreinstellung im Browser von 16px wird eine 13px hohe Schrift in einer 24px hohen Zeile dargestellt.

13px * 1.5 = 19,5px, nicht 24px.

em bezieht sich immer auf die Schriftgröße des Elements, mit einer einzigen Ausnahme: font-size. Hier bezieht sich em auf die Schriftgröße des Elternelements.

cu,
Andreas