Punkte bei Umlauten verschoben?

Wer Webseiten entwickelt und diese in verschiedenen Browsern testet, kennt vielleicht das Problem:

Im Chrome bspw. sieht die Überschrift "Über uns" ganz normal aus. Im Internet Explorer oder Firefox sind die Umlautpunkte verrutscht. Die Suche nach der Lösung für diesen auf den ersten Blick kuriosen Fehler kann manchmal sehr ermüdent sein, vor allem, wenn beim Blick auf den Quellcode alles "normal" aussieht.
Da wir dieses Problem in den letzten Jahren mehrfach hatten, ersparen wir Ihnen die Suche und zeigen Ihnen die häufigsten Fehlerquellen und deren Behebung.

1. Kopierte Texte aus Word- oder PDF-Dateien

Wenn man Inhalte in eine Website einpflegt neigt man dazu, die Texte direkt aus Word oder PDF Dokumenten zu kopieren. Meist kopiert man dann auch jede Menge "Code" mit. Leidgeprüfte Wordpress User die sich über die total zerschossene Darstellung Ihrer Blogbeiträge wundern kennen das Problem. Während die meisten CMS Editoren den kopierten Code entweder direkt bereinigen, oder eine Funktion dafür bereitstellen, ist es bei dem Umlautproblem nicht so offensichtlich, da der Fehler weder im Quelltext noch im Backend zu sehen ist, und nur in bestimmten Browsern auftaucht. Die Lösung ist indes ganz einfach: Löscht man den betroffenen Buchstaben und tippt ihn erneut ein, ist das Problem behoben. Während sich Problem 2 und 3 auch im Quelltext finden, ist dieses Problem im Quelltext nicht ersichtlich.

2. Webfonts

Manche Webfonts können den Fehler in verschiedenen Browsern verursachen. Meist hilft es, Umlaute in HTML-Entities umzuwandeln. Eine komplette Zeichenreferenz findet man hier. Alternativ kann es helfen, eine websichere Schrift als Fallback im CSS Code anzugeben (was man generell immer tun sollte).

3. Falsche oder fehlende Angabe des Zeichensatzes

Ist im HTML Code der Zeichensatz nicht angegeben, kann es zu Darstellungsproblemen mit Sonderzeichen wie Umlauten kommen. Um das Problem zu lösen, geben Sie einfach den Zeichensatz mit. In der Regel verwenden wir utf-8. Einen guten Einstieg in das Thema "Zeichensätze" finden Sie auf den Seiten des W3C.

Im head-Bereich der HTML Seite <meta charset="utf-8"/>