Toms Stichpunkte rund ums Web

Tipps & Tricks zu CSS

Welche Schriftarten kann man im Web einsetzen?

Zunächst ein wenig Theorie. Es gibt folgende Schriftfamilien, die ich in den Beispielen nur mit ihrem generischen Namen formatiere:

• serif: Diese Schriftarten haben sogenannte Serifen, das sind kleine Hilfslinien an den Buchstaben, die den Lesefluß erleichtern sollen. Fast alle Bücher und Zeitungen verwenden deshalb Serifenschriften. Die bekanntesten Vertreter sind Times und Georgia.
• sans-serif: Die Buchstaben haben keine Serifen und werden in Papiermedien meist für Überschriften verwendet. Bekannte Vertreter dieser Schriftfamilie sind Arial, Verdana und Helvetica.
• monospace: Bei diesen Schriften haben alle Buchstaben die gleiche Breite, das kleine i nimmt also genau den gleichen Raum ein wie das große M. Die alten Schreibmaschinen konnten nur solche Zeichen tippen. Ein Vertreter dieser Familie ist Courier.
• cursive: Schräg gestellte Buchstaben können auf dem Computer zwar viele Schriften darstellen, im Web sehen sie aber nur selten gut aus und sind schwer lesbar. Eine Schriftart, die auch für kursiv (italic) designed wurde, ist Comic Sans MS.
• fantasy: Diese Schmuckschriften sind höchstens für Überschriften einzusetzen.

Die Web-Browser haben sich bislang an der Tradition der Printmedien orientiert und verwenden deshalb eine Serifenschrift als Standard, unter Windows ist es Times New Roman. Leider wirkt diese Schrift auf dem Bildschirm völlig anders als auf Papier. Bedingt durch die Pixelstruktur des Mediums (und damit abhängig von der Qualität des Monitors) können die Serifen nicht deutlich dargestellt werden und den Lesefluß des Betrachters unterstützen. Im Gegenteil, sie erschweren sogar das Lesen, da die Buchstaben nicht sauber voneinander getrennt erscheinen. Überprüfe dieses einmal an den Beispielen oben.

Deswegen verwenden die meisten Webseiten eine serifenlose Schrift. Unter Windows sind hier vor allem Arial und Verdana verbreitet und auf dem Mac Helvetica. Die Arial (die vom Browser wahrscheinlich im obigen Beispiel verwendet wird) hat dabei den Nachteil, daß die Laufweite sehr gering ist, die Buchstaben also dicht bei einander liegen - auch dieses fördert das Lesen nicht unbedingt. Darum habe ich der Verdana den Vorzug gegeben, die speziell für den Bildschirm entworfen wurde.

Da die serifenlosen Schriften auf die Hilfslinien verzichten, haben sie mehr Pixel pro Buchstabe zur Verfügung und nutzen dieses zur saubereren Darstellung auf dem Bildschirm auch aus - die Schrift wird größer dargestellt als die Serifenfamilie. Deshalb wird bei Einsatz dieser Schriftarten meistens die Schriftgröße verringert (und die Zeilenhöhe vergrößert), da bei zu großen Buchstaben der Überblick in der Satzstruktur verloren geht. Bei den Beispielen oben mußte ich darum im Serifenabsatz den Schriftgrad erhöhen, damit man den Absatz noch lesen kann - weil ich ihn vorher verkleinert hatte.

Und damit hat man das nächste Problem: Die verschiedenen Systeme haben eine unterschiedliche Bildschirmauflösung. Während Windows-PC 96 pdi (dots per inch, also Pixel pro Inch) darstellen, sind es bei Mac und Unix/Linux meist nur 72 dpi. Deren Benutzer sehen den Text also kleiner als die "Dosen". Siehe dazu auch den folgenden Abschnitt über das Schriftmaß und vor allem dessen weiterführende Links.

Das Wichtigste beim Einsatz vom Standard abweichender Schriftarten ist jedoch, daß dieser Font auch auf dem Computer des Besuchers dargestellt werden kann, daß er dort überhaupt vorhanden ist. Denn was ein anderer User auf seinem Rechner installiert (oder gelöscht) hat, entzieht sich jeder Kontrolle des Erstellers von Webseiten. Darum muß ich, so leid es mir auch tut, auf die Verwendung meiner Lieblingsschrift verzichten - sie ist eben individuell und darum wohl nur bei sehr Wenigen anzutreffen. Ich kann nicht einmal darauf bauen, daß jeder die Verdana besitzt, denn auf Mac und Linux ist sie von Haus aus nicht vertreten. Deshalb gebe ich bei der Schrift-Definition mehrere Alternativen an und als letztes den generischen Familiennamen der jeweiligen Schrift, mit dem jeder Browser etwas anzufangen weiß. Also:

font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
oder
font-family: "Times New Roman", Georgia, Times, serif;
oder
font-family: "Courier New", Courier, monospace;

Der Frage, welche Schriftarten auf welchen aktuellen Computern vorhanden sind, geht Visibone in ihrem Automated Font Survey (= Font Erhebung) nach, einem Test, dem sich jeder unterziehen kann, nein: sollte. Das Ergebnis ist eine lange Liste aller installierten Fonts und ihre prozentuale Verfügbarkeit auf den Systemen Windows, Macintosh und Linux. Um die Liste so aktuell und umfangreich wie möglich zu halten, fordere ich jeden auf, sein System diesem Test zu unterziehen. Nicht morgen - jetzt!

Für einen Vergleich der Schriften im Lauftext habe ich eine Testseite zu Schriftarten erstellt. Da eine gute und ermüdungsfreie Lesbarkeit jedoch nicht nur vom gewählten Font abhängt sondern auch von der Zeilenlänge, ist im unteren Bereich die Textbreite auf 500px begrenzt. Wer einen großen Monitor besitzt, kontrolliere es einmal im Vollbild-Modus. Hier sollte es wesentlich einfacher sein, vom Ende einer Zeile auf den Anfang der nächsten zu springen. Nicht umsonst sind Zeitungsseiten z.B. in mehreren Spalten angeordnet. Aber die Usibility von Webseiten ist wieder ein anderes Thema....

weitere Informationen:
Font Size Adjust
Warum einige Schriften größer sind als andere
Gleiches Schriftbild in allen Browsern?
Warum es überall anders aussieht als auf dem eigenen Bildschirm
Wie groß sind 100%?
Ein Überblick der Schriftfamilien und ihrer Bildschirm-Darstellung
Why you should avoid Verdana
Warum dir von mir eingesetzte Schrift auch problematisch ist
Time to take back Times New Roman on the Web
Beispiele wie diese Schriftart doch eingesetzt werden kann
CodeStyle Font Sampler
Verbreitung von Schriftarten auf den verschiedenen Systemen
Microsoft Fonts and Products
Welche Schriften gibt es mit welchen Microsoft Produkten?
Beyond the Font Tag
Practical HTML Text Styling (schon etwas älter)

Welche Maßangabe sollte man für Schriften verwenden?

Darüber gibt es sehr unterschiedliche Meinungen, die unten aufgeführten Artikel verdeutlichen die Problematik gut und kontrovers. Ich verwende auf meinen Seiten meist em zur Textauszeichnung (weil dieses überall skalierbar, also vergrößerbar ist) und px zur Positionierung (damit eine Veränderung der Schriftgröße nicht das Layout zerschießt).

Wie oben unter Schriftarten erwähnt, verwende ich die Verdana als Schrift für den Lauftext, ein speziell für den Bildschirm designter Font. Da die Standardvorgabe der Browser zu groß ist, verkleinere ich sie auf 0.8 bis 0.9em und vergrößere gleichzeitig die Zeilenhöhe auf 1.4 bis 1.5em. Damit kann ich, wie ich denke, die beste Lesbarkeit erreichen. Wer anderer Meinung ist, maile mir seinen Protest.

Für meine eigenen Versuche habe ich eine Testseite zur Schriftformatierung erstellt. Wer verschiedene Browser und/oder Betriebssysteme zur Verfügung hat, sollte sich diese Seite in jedem von ihnen ansehen und kann über die Unterschiede staunen.

Bei der Wahl der Schriftgröße muß aber auch die Zeilenlänge berücksichtigt werden. 60 bis 80 Zeichen gelten als optimale Textbreite in Bezug auf die Leseflüssigkeit. Wer es ausprobieren will, kann dieses interaktiv auf meiner Testseite zur Zeilenlänge tun.

Bei der Verwendung von em sollte man berücksichtigen, daß es eine relative Angabe ist: 0.8em bedeuten 80% des Elternelements. Hat man einem Absatz <p> zum Beispiel diese Größe gegeben und einem darin enthaltenen Link <a ...> ebenso, hat dieser nur noch 64% des Standardwertes. Also: sauberes CSS schreiben und Seiteneffekte beachten.

weitere Informationen:
Numerische Angaben in CSS
Ein Überblick aus SelfHTML
Was Betriebssystem und Browser alles mit Schriften anstellen
Warum es überall anders aussieht als auf dem eigenen Bildschirm
Gleiches Schriftbild in (fast) allen Browsern?
Michael Charlier empfiehlt em und eine Extrawurst für Netscape 4
Give Me Pixels or Give Me Death
Eine Plädoyer für px und gegen alle anderen Maßangaben
Mikroskopischer Text im IE
Ein ärgerlicher Bug verstellt dauernd die (relative) Schriftgröße
Text Sizing - a comparative tour
264 Screenshots aller Maßangaben in verschiedenen Browsern und Systemen, zusammengestellt von TheNoodleIncident.com
Typographie und Schriftvergleich
Screenshots aus IE und Netscape auf Mac und PC
EM und verschiedene Plattformen
Screenshots von Linux und Mac
Schriftgrößenvergleich
Was Mac- und Linux-Benutzer von den Windows-Schriften sehen
Why Windows Web Pages Have Tiny Text
Das tägliche Ärgernis von Macintosh-Benutzern
Das Windows/Mac font-size-Problem
Rene Grassegger plädiert für em und zwei Stylesheets

Beispiele für saubere zwei- und dreispaltige Layouts

Mehrspaltige Layouts ließen sich früher mit Tabellen relativ einfach gestalten, aber das ist dann eben keine saubere Web-Seite mehr. Dabei ist es auch mit reinem HTML und etwas CSS leicht möglich, mehrere Spalten nebeneinander anzuordnen. In meiner Spielwiese habe ich verschiedene kleine, einfache Beispiele für Webseiten ohne Tabellen erstellt, die als Grundgerüst auch für komplexe Projekte dienen können. Bitte bedient euch.

In meinen Beispielen habe ich zwei unterschiedliche Techniken verwendet, das "Floaten" von Bereichen und die absolute Positionierung. Ich selber bevorzuge die zweite Variante, da erstens das Konzept der Floats sehr komplex und fehleranfällig ist (besonders im Internet Explorer) und zweitens meine Methode es erlaubt, die Navigations-Spalte ans Ende des Quelltextes zu stellen. Dadurch kommen die wichtigen Inhalte ganz oben zu stehen, was sie für die Suchmaschinen relevanter macht. Ich denke, meine Platzierungen bei Google sprechen für sich.

CSS Positionierung und der Fluß der Elemente

Um CSS effektiv für das Layout einzusetzen ist es notwendig zu verstehen, wie die Positionierung von Bereichen geregelt ist. Folgender Artikel hat mir dabei sehr geholfen. Er weist auch auf Dinge hin, die zu beachten sind: CSS Positioning, eine Learning Resource von BrainJar

Big John hat in seiner umfangreichen CSS-Sammlung Position is Everything ebenfalls einen grundlegenden Beitrag gebracht: Flowing and Positioning, Two Page Models. Er demonstriert anschaulich, wie der "Normal Flow" der Elemente auf einer Webseite durch "CSS Positioning" beeinflusst wird.

Wer es noch ausführlicher will, vertiefe sich in die W3C CSS2 Specification: W3C Visual Formatting Model

Die aktuellen Browser kommen mit der Positionierung inzwischen problemlos klar, wie Joe Gillespie in seiner Untersuchung CSS-P in Current Browsers fest stellt.

Probleme mit float

Ein Nachtrag zu CSS Positionierung und der Fluß der Elemente: Wie in der lesenswerten Einführung zu lesen, können floatende Bereiche einen sie umschließenden <div>-Container überlappen. Zum Beispiel wird in folgender Konstruktion der gelbe Hintergrund hinter den floatenden Boxen gar nicht angezeigt, denn die Container-Box ist leer, genau 0 Pixel hoch. Die floatenden Boxen ragen aus ihrem Bereich heraus.

 <div id="container" style="background-color: yellow">
   <div style="float: left; background-color: red">
      Die erste floatende Box
   </div>
   <div style="float: left; background-color: blue">
      Die zweite floatende Box
   </div>
 </div>

Will man den übergeordneten Bereich, also das gelbe Div, seine floatenden Kinder umfassen lassen, muß man ein weiteres Kind-Element hinzufügen. Dieses kann auch leer sein, muß auf jeden Fall aber das Floaten mit clear beenden:

 <div id="container" style="background-color: yellow">
   <div style="float: left; background-color: red">
      Die erste floatende Box
   </div>
   <div style="float: left; background-color: blue">
      Die zweite floatende Box
   </div>
   <div style="clear: both">Das war's</div>
 </div>

Alternativ zum div wäre auch ein br möglich:

   <br style="clear: both">

Das ist kein Bug, das ist ein Feature floatender Elemente. Richtig eingesetzt sind Containing Floats "a very powerful layout tool", wie Eric Meyer an Beispielen demonstriert. Man muss sie nur verstehen, siehe dazu die unten stehenden Links.

Doch leider stellen die Browser dieses komplexe Layout-Element recht unterschiedlich dar und kommen unter speziellen Bedingungen zu sehr verschiedenen Ergebnissen.

Peek-A-Boo Bug
Eine unschöne Spezialität des Internet Explorers 6 ist es, dass er im Zusammenhang mit Floats gelegentlich Teile einer Webseite unterschlägt und einfach nicht anzeigt. Erst beim Scrollen oder Überfahren eines Links ist der Inhalt plötzlich da: der sogenannte Peek-A-Boo Bug. Genaueres dazu und Abhilfen gibt es bei Big John's Position Is Everything.

weitere Informationen:
Float: The Theory
Einführung in Floats, jetzt auch auf deutsch: Float: Die Theorie
Containing Floats
Eric Meyer demonstriert die Eigenschaften von Floats
The Float Model Problem
Statische Elemente und Floats in verschiedenen Browsern
How To Clear Floats Without Structural Markup
von Big John, auf deutsch Einschließen von Floats ohne zusätzliches Markup
IE Three Pixel Gap
ein Internet Explorer-Bug in Zusammenhang mit Floats
IE 6 Peek-a-Boo Bug
ein weiterer IE-Bug: Inhalte werden manchmal nicht angezeigt
IE 6 Guillotine Bug
und noch ein IE-Bug mit recht unerwarteten Folgen

Probleme mit Liquid Design

Beim Design von Webseiten unterscheidet man zwischen

• Ice Design: Alle Bereiche der Seite sind in ihrer Breite pixelgenau festgelegt. Damit bleibt das Layout des Designers bei jeder Browsergröße erhalten.
  Nachteil: Ist mein Browserfenster kleiner als die Vorgabe des Designers, liegt ein Teil des Dokuments außerhalb des Bildschirms und es erscheinen hässliche horizontale Scrollbalken. Beispiel: Webreview CSS Compatibility Chart und alle Seiten "optimiert für eine Bildschirmauflösung von 1024 * 768". Oder das Design ist schmaler als das Browserfenster, dann bleibt rechts ein leerer (weißer) Raum. Beispiele: W3Schools und Spiegel.
• Liquid Design, die hohe Kunst des Webdesigns: Die Breite der Bereiche passt sich dynamisch dem Browserfenster und der Schriftformatierung an, die zur Verfügung stehende Fenstergröße wird optimal ausgenutzt.
  Nachteil: Bei hoher Bildschirmauslösung und ein Browserfenster im Vollbild-Modus werden Textzeilen sehr lang und damit schwer lesbar. Beispiele: die W3C-Dokumente und Jakob Nielsen's Alertbox.

Kein Designer weiß, wie sein Werk auf dem Bildschirm eines Besuchers aussehen wird. Statistiken wie die von WebHits sagen zwar, dass die Mehrzahl der User einen Bildschirm mit 1024*768 Pixeln besitzen, zunehmend mehr haben eine noch größere Auflösung und nur eine Minderheit benutzt noch einen 800*600er-Bildschirm. Also kann man die Breite von 1024 Pixeln doch ausnutzen, die etwa 90% der Besucher zur Verfügung haben, oder? Falsch, denn die meisten von ihnen werden ihren Browser nicht im Vollbild einsetzen, schon um jederzeit Zugriff auf den Desktop zu haben. Und niemand verändert sein Browserfenster gerne nur wegen einem rücksichtslosen Webdesigner.

Die Zeilenbreite von Fließtext muß ein richtiges Verhältnis von Schriftgröße und Zeilenabstand aufweisen. Nur wenn alle drei Faktoren optimal aufeinander abgestimmt sind, ist eine gute Lesbarkeit gegeben. Als Faustregel hat sich eine Textbreite von 60 - 80 Buchstaben pro Zeile bewährt. Breitere oder schmalere Textzeilen behindern die Lesefreundlichkeit. Wer dieses selber ausprobieren möchte, unter Berücksichtigung von Schriftart und Schriftgröße, kann dieses interaktiv auf meiner Testseite zur Zeilenbreite machen.

Wie kann man eine optimale Zeilenlänge mit Liquid Design erreichen? Hier beginnt die hohe Kunst des Webdesigns. Mehrspaltige Seiten sind dabei flexibler als Einspalter. Während mir bei Glish die prozentuale Aufteilung der Bereiche bei kleinerer Fensterbreite noch nicht optimal erscheint, haben beispielsweise A List Apart und KommKonzept das Problem besser gelöst.

Um das grundlegende Problem der Zeilenläge beim Liquid Design zu lösen, wurden in CSS2 die Attribute max-width und min-width eingeführt. Während Firefox und Opera diese seit langem unterstützen, verweigerte sich der Marktführer Internet Explorer hier bis zur letzten Version 6. Da der IE 7 sich langsam aber sicher durchsetzt, sollte man diese Methoden zur besseren Lesbarkeit von Texten ruhig öfters benutzen als es bis jetzt der Fall ist. Die Leser im Web werden es danken.

weitere Informationen:
Liquid Design for the Web
ein schon etwas älterer Artikel von evolt.org
Wie groß ist 100%?
mit Überlegungen zum Problem der Zeilenlänge

Ein <div> zentrieren

Mit dem gewohnten, in XHTML aber nicht mehr enthaltenen <center>-Tag und align=center war es einfach, Elemente mittig auszurichten. In CSS heißt es jetzt text-align:center und gilt nur noch innnerhalb von Block-Elementen, etwa Absätzen, Tabellen oder Div-Bereichen.

Um eine <div>-Box selber horizontal auf dem Bildschirm zu zentrieren, wird in Standard konformen Browsern seine margin auf auto gesetzt.

  <div style="width: 200px; margin: 0px auto">
    Hallo Welt
  </div>

Zu den Browsern, die dieses verstehen, gehören Firefox, Netscape 6+, der Internet Explorer 6+ und Opera 7+. Ältere Browser, aber auch der IE im Quirks-Modus, kennen es nicht und ignorieren die Angabe. Bei den Oldies klebt die Box am linken Bildschirmrand.

Ein Workaround, der auch alte Browser befriedigt, ist, den zu zentrierenden Bereich in einen anderen Bereich einzubetten, der seinen Inhalt dann mit text-align zentriert. Notfalls ist als übergeordneter Bereich auch der <body> des Dokuments zu verwenden.

  <div style="text-align: center">
  <div style="width: 200px; margin: 0px auto; text-align: left">
    Hallo Welt
  </div>
  </div>

Man beachte, daß durch die Vererbung das text-align vom übergeordneten Element bzw. <body> auf alle enthaltenen Elemente übergeht. Will man dieses ausschalten, muss ihre Ausrichtung eigens wieder auf left gesetzt werden. Etwas umständlich, aber problemlos machbar.

Problematischer ist eine vertikale Zentrierung auf dem Bildschirm zu erreichen. Ein height=100% hat früher bei Tabellen mehr oder weniger gut funktioniert, gehörte aber nie zum HTML-Standard und verhindert heute, dass ein Dokument valide ist. Und wo ist die Mitte eines Browserfensters anzusetzen? Sind Sidebars, Tableisten, Toolbars, Statuszeile usw. berücksichtigt? Macht ihre Vernachlässigung nicht vielmehr das ganze angestrebte Design zunichte? Von den Möglichkeiten alternativer Displays ganz zu schweigen. Die Tipps in den unten angegebenen Verweisen können mich jedenfalls nicht überzeugen.

Die oben vorgeschlagene Lösung zur horizontalen Zentrierung ist problemlos einsetzbar. Weitere Tricksereien, etwa zur vertikalen Zentriertung, mögen für eine einfache Message-Box noch sinnvoll sein. Ansonsten halte ich sie jedoch für höchstens theoretisch interessant, in der praktischen Umsetzung aber nicht nutzbar. Es durchbrecht die logische Anordnung der Elemente auf dem Bildschirm, ihre sichere Umsetzung in allen Umgebungen und die Zusammenwirkung mit anderen Elementen ist viel zu ungewiss. Es gilt vielmehr, den normalen Fluss der Bereiche zu verstehen und ihn sinnvoll zu nutzen. Siehe dazu CSS Positionierung und der Fluß der Elemente.

weitere Tricksereien:
Dead Centre Divs
ein Vorschlag von Web Page Design for Designers
Skalierbarer Layer in der Seitenmitte
ein Vorschlag von Dr. Web
Centering: Negative Margin
ein Vorschlag von BlueRobot

Eigene Stylesheets im Browser verwenden

Viele Browser bieten die Möglichkeit, eigene Stylesheets einzubinden und damit die Vorgaben des Webseiten-Erstellers zu überschreiben. In einigen Fällen mag das sinnvoll sein, etwa wenn zu kleine Schriften benutzt werden. Andererseits wird damit das gesamte Design einer Website in Frage gestellt und häufig auch über den Haufen geworfen. Aber jeder wie er mag - man ist damit für eventuelles Chaos auf dem Bildschirm selber verantwortlich. Wie es geht, wird im Kochbuch für CSS-Anarchisten beschrieben.

Welche Browser gibt es im Web?

Eigentlich nur zwei: Microsofts Internet Explorer und zunehmed Firefox. Der Rest ist fast ohne Bedeutung und spielt nur in Nischen eine größere Rolle (Linux-Gemeinde, Grafiker mit alten Macintoshs, Web-Freaks mit Exoten-Browsern).

aktuelle Browser-Statistiken:
WebHits Internetstatistiken
überwiegend Deutschland, 1 Million Besucher/Tag
TheCounter Global Statistics
international, 2 Millionen Besucher/Tag
Browser News: Statistics
international, mehrere Quellen
W3Counter Global Web Stats
monatliche Analysen des Web-Tracker-Anbieters
Smashing Magazine
Who is your visitor? An average profile (Oktober 2007)
Heise Online
Statistik wird selten veröffentlicht, hier vom September 2007

Das Monopol des Microsoft-Browsers ist gebrochen. Der alte IE 6 von 2001 verliert langsam an Bedeutung und wird vom IE 7 ersetzt. Letzterer hat zwar einiges von seinen Mitbewerbern abgeguckt (Tabs, Popup-Blocker, integrierte Suche), kommt in seiner Benutzerfreundlichkeit aber immer noch nicht an andere Browser ran. Über die Vorteile meines Favoriten habe ich im Stichpunkt Firefox ausführlich geschrieben.

Alternative Browser zum IE:
Mozilla Firefox
die deutsche Seite von Mozilla-Europe.org
Opera
der Browser aus Norwegen, endlich auch Werbung

Welcher Browser kann was (nicht)?

Dazu eine Liste von Links, die die Fähigkeiten und Unfähigkeiten der gängigen Browser im Umgang mit CSS detailiert aufführen und ggf. Workarounds anbieten.

CSS Browser-Kompatibilität
CSS 4 You hat auch eine sehr gute deutschsprachige CSS-Referenz
CSS Browser Support
House of Style, die Webseiten des Style Master CSS Editors
CSS Browser Compatibility
Tabellen von QuirksMode, der neuen Site von Peter-Paul Koch
CSS1 Test Suite
Testseiten des W3C ob ein Browser die Spezifikationen versteht
CSS2 Test Suite
der Prototyp für die aktualisierten W3C-Seiten von Eric Meyer
Position Is Everything
Big John demonstriert Browser Bugs und CSS Besonderheiten
CSS Bug Tables
von RichInStyle.com
CSS Bugs and Workarounds
von der CSS Pointers Group

Acid Test 2
daran scheitern bisher alle Browser - bis auf Opera und Safari
deutsche Erklärung dazu in der Wikipedia

Ursache vieler CSS-Probleme im IE - hasLayout

Entwickelt man moderne Webseiten und vergleicht sie in allen gängigen Browsern, stößt man des öfteren auf scheinbar merkwürdige Besonderheiten im Internet Explorer (alle Versionen). In den meisten Fällen handelt es sich Auswirkungen eines Konzeptes, das nur der IE kennt und das nicht einfach zu verstehen ist: die Eigenschaft hasLayout.

Anders als andere Eigenschaften in CSS wird es im IE den Objekten nicht extra zugewiesen, sondern bestimmte Elemente haben automatisch "Layout", anderen wird es stillschweigend mit bestimmten CSS-Angaben hinzugefügt. Ob ein Element "Layout" hat oder auch nicht, kann u.a. folgendes nach sich ziehen:

• Viele bekannte IE-Fehler im Zusammenhang mit float
• Die betroffenen Boxen selbst behandeln grundlegende Eigenschaften unterschiedlich
• Zusammenfallende Ränder zwischen einem Container und seinen Nachfahren
• Verschiedene Probleme bei der Erstellung von Listen
• Unterschiede beim Positionieren von Hintergrundbildern
• Unterschiede zwischen Browsern beim Einsatz von Scripts

Wenn man auf Merkwürdigkeiten des IE in diesen (oder anderen) Fällen stößt, sollte man zunächst einmal versuchen, die Layout-Eigenschaft des betreffenden Elements zu erzwingen durch Hinzufügen von zoom: 1. Diese Eigenschaft bewirkt (außer dem Layout-Modus im IE) nichts: sie gilt nur für Microsofts Browser und bewirkt eine Größenveränderung um den Faktor 1, also gar nicht. Allerdings ist die Seite dann nicht mehr valide, aber zum Testen reicht es allemal. Eine andere und valide Möglichkeit wäre, der betreffenden Box ein position: relative zu geben, falls es im Seitenkonzept problemlos ist.

Wer genaueres über das noch immer nicht ganz erforschte Konzept des IE wissen will oder muß, sollte sich durch den Artikel On having layout - The concept of haslayout in IE/Win oder seine deutsche Übersetzung Über hasLayout - das Konzept im IE/Win quälen. Es ist kein leichter Stoff und auch nicht immer logisch, eher ein tragischer Fall von "IE Voodoo".

IE-Fehler bei border und padding - Box Model Bug

Das CSS-Box-Model sieht vor, daß margin, border und padding außerhalb der festgelegten Breite eines Bereichs zu liegen haben. Folgender Bereich hätte also eine Inhaltsbreite von 200px und eine äußere Breite von 260px (10+20+200+20+10):

 <div style="width: 200px; border: solid 10px; padding: 20px">
 </div>

Der Internet Explorer 5.x (nur Win) interpretiert das jedoch anders: Er zeichnet border und padding innerhalb der Box, sodaß die Inhaltsbreite nur noch 140px und die äußere Breite 200px beträgt. Gleiches gilt auch für Höhenangaben. Eine margin wird in allen Browsern außen hinzu gefügt.

Die Auswirkungen auf das Layout einer Webseite sind natürlich gewaltig. Beim IE ab Version 6 wurde dieser Fehler behoben, allerdings nur, wenn das Dokument eine gültige DOCTYPE-Angabe besitzt, ansonsten verhält er sich wie sein Vorgänger. Siehe dazu unten: Darum ist der richtige DOCTYPE wichtig. Auch eine XML-Deklaration vor der Doctype-Angabe schaltet den IE in den alten Modus zurück.

Um Webseiten unter allen Browsern ein ähnliches Design zu geben, kann man zu Tanteks Box Model Hack greifen, der durch die Angabe von CSS-Anweisungen, die nur der IE 5 nicht versteht, dieses Problem umschifft. Ich stehe diesem und anderen Hacks jedoch kritisch gegenüber, da nicht abzusehen ist, wie zukünftige Browser und andere Ausgabe-Geräte diese Angaben interpretieren.

Eine andere Lösung könnte es sein, dem IE 5.x ein besonderes Stylesheet zu präsentieren, das man über die MS-propriätären Conditional Comments einbindet. Aber auch dann muss man dafür sorgen, dem IE 6 den richtigen Doctype mitzugeben, damit der Bug dort nicht auftaucht.

In den meisten Fällen kann man den Fehler jedoch umgehen, indem man für die Box nur die Außenmaße festlegt und eventuell auch eine dünne border, das padding aber den darin enthaltenen Elementen mitgibt. Dieses ist die Methode, die ich ausschließlich einsetze.

 <div style="width: 200px; border: solid 1px">
    <p style="padding: 30px">... Text ...</p>
 </div>

Auf jeden Fall muß man seine Webseiten mit dem Internet Explorer 5 ausgiebig testen. Leider ist es nicht möglich, zwei verschiedene IE-Versionen auf einem Computer zu installieren. Hier kann man sich behelfen, indem man die DOCTYPE-Deklaration kurzfristig deaktiviert, da der IE 6 dann in den Quirk-Modus des IE 5 schaltet.

Nachtrag: Es scheint doch möglich zu sein, unterschiedliche Versionen des Internet Explorers gleichzeitig und funktionierend installiert zu bekommen: Dr. Web zeigt wie das gehen soll.

weitere Informationen:
Box Model Hack
von Tantek Celik
The Good, the Bad, and the Ugly
Tanteks Hack ausführlich beschrieben
Box Model Problems
Tan Hack, soll kompatibler sein als Tanteks Hack
Microsofts Conditional Comments
diese Angaben versteht nur der Internet Explorer
Hat der IE 6 im Quirks Mode noch den Box Model Bug?
Eine Demo-Seite auf CSS-Technik
IE und CSS
Testseite mit Problemen des Internet Explorers von e-workers.de
Explorer Exposed!
Alle bekannten CSS-Fehler des IE und wie man sie umgeht, von Big John
Doctype Switching
Standard and Quirk Mode in IE and Netscape

Fouc Internet Explorer - Flash Of Unstyled Content

Wird im IE das erste Stylesheet mit @import eingebunden, kommt es zu einer häßlichen Erscheinung: beim Laden wird zunächst die vollkommen ungestaltete Seite angezeigt und erst dann durch die CSS-formatierte ersetzt. Man kann diesen Bug umgehen, indem man als erstes eine CSS-Datei, und sei es nur eine Dummy-Datei, mit link rel aufruft.

Weitere Informationen dazu bei CSS-Technik oder umfangreicher und auf englisch bei BlueRobot.

CSS Hacks - Browser austricksen, pro & kontra

Leider ist die Unterstützung modernen CSS noch nicht in allen Browsern gleichmäßig verwirklicht, vor allem die älteren Versionen (Netscape 4, IE 5, teilweise auch IE 6) neigen dazu, ein valides Stylesheet nur fehlerhaft anzuzeigen. Hier kommen jetzt die Trickser zum Zuge, die mit ausgeklügelten Hacks spezielle Anweisungen vor speziellen Browser zu verstecken suchen. CSS-Hacks sind nicht anderes, als eine Unzulänglichkeit eines Browser durch eine andere Unzulänglichkeit zu umgehen.

Die CSS Diskuss List, eine amerikanische Mailingliste, hat eine umfangreiche Zusammenstellung aller praktikablen CSS Hacks veröffentlicht, die allen gängigen Browsern Rechnung trägt.

Ich stehe diesen Tricksereien jedoch eher skeptisch gegenüber. Sie machen die an und für sich einfache und logische Struktur von CSS zunichte und erschweren die Weiterentwicklung von Webseiten. Fängt man erst einmal mit Hacks an, ist das Konzept für Änderungen und Erweiterungen nahezu verbaut. Und wenn eine neue Browserversion einen Teil eines Hacks beherrscht, muss die ganze Seitenstruktur neu angelegt werden. Der Artikel von Peter-Paul Koch Keep It Simple, the Lure of CSS Hacks, deckt sich deshalb weitgehend mit meiner Auffassung. Lediglich Tricks gegen alte Browser, die nicht mehr weiter entwickelt werden, lässt er gelten. Ich ergänze: Gegen Microsofts Oldies helfen problemlos Conditional Comments, alles andere ist von Übel.

Darum ist der richtige DOCTYPE wichtig

Zuerst einmal: Bisherige Seiten, die kein modernes CSS verwenden, brauchen diese Angabe nicht. Wer allerdings neuere Techniken nutzen will und dabei erwartet, dass eine Webseite in allen Browsern (annähernd) gleich dargestellt wird, muß die richtige Document Type Deklaration (DTD) an den Anfang seines Dokuments stellen. Nur dann rendern moderne Browser ein Dokument so wie es in diesen Spezifikationen festgelegt ist. Warum das so ist und wie der DOCTYPE richtig angegeben wird, beschreiben die unten verlinkten Artikel.

Wer überprüfen will, ob eine Webseite den (X)HTML- und CSS-Standards entspricht oder nicht, tippe oder kopiere
javascript:alert(document.compatMode)
in die Adresszeile seines Browsers auf entsprechenden Seiten. "CSS1Compat" als Ergebnis bedeutet moderner Standard-Modus, "BackCompat" ist eine im alten Stil erstellte Webseite im Quirk-Modus mit allen Unzulänglichkeiten und browserspezifischen Eigenheitenen, zum Beispiel beim Box Model; diese Seiten haben dann eine Macke (engl.: quirk).

Den Codeschnipsel zur Ermittlung des Kompatibilitäts-Modus gibt es hier auch als Bookmarklet: compatMode.

Einige Webseiten wollen eine XML-Konformität dadurch erreichen, dass sie dem Dokument zusätzlich die XML-Deklaration <?xml version="1.0" encoding="ISO-8859-1"?> voranstellen. Das bewirkt unter den heutigen Gegebenheiten aber genau das Gegenteil: es ist für XHTML nicht nötig, schaltet dafür aber den IE 6 in den nicht Standard gemäßen Quirk-Modus. XML ist nur dann sinnvoll, wenn die Seite auch als application/xml ausgeliefert wird, doch das kann der IE bisher nicht darstellen. Also unbedingt weg lassen!

Informationen zu DOCTYPE, Standard- und Quirks-Modus:
DTD - Document Type Declaration
Umfangreiche Informationen von Fabrice Pascal (auf deutsch)
W3C DTD List
List of valid DTDs you can use in your document
Der Doctype Switch und seine Auswirkungen
Dieser Artikel erklärt, wie der Doctype-Switch funktioniert, und zeigt anhand von Beispielen, welche Unterschiede zwischen den einzelnen Darstellungsmodi bestehen.
Activating the Right Layout Mode
Using the Doctype Declaration in Mozilla, Mac IE 5 and Win IE 6
Doctype Switching
Standard and Quirk Mode in IE and Mozilla
Mozilla's Quirks Mode
Informationen der Entwickler zum Erkennen des Modus und die Unterschiede in der Darstellung von Webseiten im Standard- und Quirks-Modus
The Doctype Switch in Internet Explorer 6
Informationen von Microsoft zum CSS-Verhalten des IE
The Opera 7 Doctype Switches
Die entsprechenden Informationen aus der Opera Dokumentation
Dokumenttyp-Angaben
eine deutsche Einführung von SelfHTML

Warum sollte eine Webseite valide sein?

Eine Webseite gilt als "valide", wenn sie ausschließlich mit den Standards entsprechenden HTML-Tags und CSS-Angaben erstellt wurde, also keinerlei fehlerhaften, proprietären oder veralteten Code enthält. Warum das heute notwendig ist, habe ich im Beitrag Warum korrektes HTML und CSS wichtig sind ausführlich beschrieben. Ein Webdesigner, der keine validen Seiten abliefert, ist sein Geld nicht wert.

Um eine Webseite valide zu machen, muß man dem Browser zunächst einmal mitteilen, an welchem Standard sie sich orientiert. Zur Verfügung stehen die Standards HTML oder XHTML, beide besitzen einige Vor- und Nachteile, die ich in diesem verlinkten Beitrag beschrieben habe. Dazu gibt es noch die Unterkategorien "strict" und "transitional", wobei letzteres großzügiger mit veralteten Tags umgeht, während ein strikter Code zukunftsfähiger ist. Den verwendeten Standard trägt man in der DOCTYPE-Deklaration im Kopf des Webdokuments ein.

Zur Überprüfung der Korrektheit des Codes gibt es vom WWW-Consortium (W3C) zwei schnelle und kostenlose Validatoren, die angegebene Webseiten untersuchen, alle Fehler melden und dazu die Begründungen liefern. Ob meine Webseiten den Standards entsprechen, kann man am Fuß jeder Seite leicht überprüfen: dort befinden sich zwei Buttons, die das aktuelle Dokument zur Überprüfung an die W3C-Validatoren übermitteln, weder mein (X)HTML noch mein CSS sollten dabei Fehler aufweisen.

Die Validatoren:
W3C Markup Validation
überprüft das HTML bzw. XHTML von Webseiten
W3C CSS Validation
überprüft ein Stylesheet auf Korrektheit

Der W3C-Validator bemängelt color-Definition

Da hat man seine Webseite zufriedenstellend fertig gestellt, sie funktioniert auch auf allen Browsern und nun prüft man sie noch mit dem W3C-Validator auf syntaktische Richtigkeit. Doch der fängt an sich zu beschweren und stößt jedesmal, wenn man für ein Element eine Farbe festgelegt hat, eine Warnung aus: "Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben". Das war doch so gewollt, die Hintergrundfarbe ist global festgelegt und braucht doch eigentlich nicht ständig wiederholt zu werden.

Hier sind die Standards meiner Meinung nach überpenibel. Man wollte wohl verhindern, daß durch die Vererbung auf untergeordnete Elemente sich ungewollte Hintergrundfarben einschleichen. Als ob man sich seine Webseiten nicht gelegentlich selbst einmal im Browser ansieht.... Ich halte diesen Zwang zur ständigen Wiederholung der Hintergrundfarbe sogar für kontraproduktiv: Will man die Farbe einmal wechseln, muß man sie nicht nur einmal im übergeodneten Element ändern, sondern vielfach.

Doch auch hier gibt es einen Trick: wählt man background-color: transparent, bleibt die Hintergrundfarbe wie sie ist und der Validator ist zufrieden gestellt. Tja, er ist eben auch nur ein Computer-Programm. Aber das sind die Browser ja auch.

http://www.stichpunkt.de/css/css-tipps.html