Wir haben uns die Kochbar-Website bisher nur im Firefox angeschaut. Diese Vorgehensweise ist empfehlenswert, da Sie stets auf modernen Browsern entwickeln sollten, die sich eng an die W3C-Empfehlungen halten. Aber vergessen Sie niemals, auch in anderen Browsern zu testen! Werfen Sie in diesem Zusammenhang noch einmal einen Blick in Kapitel 2.7.2 »Browsertests«.

Abb. 8.42: IE 6: Die Speisekarte beginnt erst unterhalb der Sidebar

Als Erstes überprüfen wir die Darstellung in dem Browser, der uns vermutlich die meiste Arbeit machen wird: Internet Explorer 6. Allerdings – und ich bin überrascht – sieht die Startseite genau so aus, wie sie aussehen soll! Auch die Seite über die Kochbar und das Impressum sind fehlerfrei. Erst bei der Speisekarte gibt es gleich mehrere Darstellungsfehler (siehe Abbildung 8.42). Zwischen dem Absatz und der Tabelle ist ein großer Abstand; offenbar beginnt die Tabelle erst unterhalb der Sidebar. Zudem stimmen die Abstände der caption-Elemente nicht.

Der IE 6 hat ein Problem damit, dass sich die Tabelle über die volle Content-Breite erstreckt. Bevor wir uns zu lange damit aufhalten, herauszufinden, woran das liegt, geben wir einfach einen festen Wert an, mit dem sich auch der IE zufriedengibt.

/**
* Regeln für spezielle Elemente
*
* @section Speisekarte
*/
table.speisekarte { width: 590px; }

Der Internet Explorer 6 kennt die Eigenschaft margin für das caption-Element nicht. Wir müssen anders vorgehen, um die gewünschten Abstände zu erhalten. Wir setzen margin auf 0 und deklarieren die Abstände für padding; das interpretiert dann auch der IE 6.

/**
* @section Tabellen
*/
caption {
  color: #3C6331;
  background-color: white;
  font-size: 1.5em;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;margin: 0;
  padding: 1.5em 0 .5em 0;
}

Während wir die IE-Bugs korrigieren, müssen wir natürlich parallel die Auswirkungen im Firefox im Auge behalten. Es sieht aber gut aus: Wir haben die Darstellungsfehler im IE ohne Nebenwirkungen korrigiert.

Die Tabelle mit den Öffnungszeiten sieht im IE 6 im Wesentlichen richtig aus. Die Deklarationen für die äußeren Überschriftenzellen stellt er nicht dar, allerdings haben wir das bereits einkalkuliert, als wir einen Attributselektor eingesetzt haben, den der IE 6 nicht versteht.

Abb. 8.43: Die Kontaktseite sieht im IE 6 schlimmer aus, als sie eigentlich ist

Die Kontaktseite hingegen sieht ziemlich kaputt aus (siehe Abbildung 8.43). Was ist denn da passiert?

Ich gebe zu, diese Frage ist nicht leicht zu beantworten. Eines ist klar: Wir haben es hier mit einem hasLayout-Bug zu tun, aber mit welchem? Und was genau ist das Problem? Es sieht so aus, als würde das textarea-Element sich genau den Abstand nach links gönnen, den das #content-Element für margin-left hat. Aber weshalb? Es könnte sich um den IE inherited margin bug handeln, aber so ganz trifft er nicht zu. Woher weiß die textarea-Box überhaupt von dem Margin-Bereich der äußeren Box? Müsste dieser Margin dafür nicht durch die dazwischenliegende #content-Box hindurchtunneln?

Wie auch immer, wir lösen das Problem, indem wir zur Allzweckwaffe gegen IE-Probleme greifen: Wir sorgen dafür, dass das Element »Layout« hat, das wir im Verdacht haben, das Problem zu verursachen. Nach einigem Ausprobieren landen wir bei #content. Wir schreiben also:

/**
* @section Content
*/
div#content {
  margin: 0 0 0 288px;
  padding: 0 12px 0 36px;
  height: 1%;
}

Und das Problem ist umgangen.

Nun müssen wir noch ein weiteres Problem lösen: Die Tabellenzeilen sind im IE 6 nicht eingefärbt. Das liegt daran, dass dieser Browser mit der Deklaration von background-color für tr nichts anzufangen weiß. Allerdings können Tabellenzellen einen Hintergrund haben. Wir ändern die Regeln wie folgt:

/* Tabellen in Formularen */
form table {
  width: 100%;
  border-collapse: collapse;
  margin: .8em 0;
}
form tr {
  color: inherit;
  background-color: #e8e7ee;
}
form tr:nth-child(odd) {
  color: inherit;
  background-color: #f5f4f8;
}
form td,
form th {
  color: #5e2021;
  background-color: transparent;
  border-bottom: 4px solid white;
  padding: 5px 5px 5px 15px;
}
form th {
  width: 40%;
  text-align: left;
}

Jetzt macht auch der Internet Explorer alles richtig.

Nach diesem Schock nehmen wir nun allen Mut zusammen und schauen uns das Rezept des Tages an – die Seite ist jedoch einwandfrei.

Damit haben wir die Kochbar-Website im IE 6 getestet und alle Probleme beseitigt. Machen wir nun dasselbe im IE 7 und im IE 8 (die Kochbar wurde mit der zweite Betaversion des IE 8 getestet). Ich kann keine Probleme oder wesentlichen Unterschiede feststellen. Sehen Sie etwas?

Auch in folgenden Browsern präsentiert sich die Kochbar-Website vollkommen fehlerfrei:

• Firefox 2.0.0.17
• Opera 8.54
• Opera 9.60 (der sogar die Tabellenzeilen im Kontaktformular unterschiedlich einfärbt)
• Konqueror 4.1.2

Im Safari 3.1.2 für Macintosh und Windows sieht die Schrift geringfügig kleiner aus als in den anderen Browsern, auch stimmen einige Abstände nicht exakt überein. Es handelt sich jeweils um Kleinigkeiten, die nur auffallen, wenn man die Darstellung mit der in anderen Browsern vergleicht. Wir brauchen nicht aktiv zu werden, sondern lassen alles, wie es ist.

Abb. 8.44: Im Safari können wir geringfügige Unterschiede feststellen, wenn wir ganz genau hinsehen

Wie sieht die Seite eigentlich mit Lynx aus? Abbildung 8.45 zeigt uns, dass wir zufrieden sein können. Alles ist übersichtlich formatiert, wir erkennen die Navigation, Überschriften, Links; auch die Unterseiten sehen sehr übersichtlich aus – saubere Arbeit!

Abb. 8.45: Die Kochbar im Textbrowser Lynx

Abbildung 8.171:

Zum Seitenanfang

Das Ergebnis

Die Kochbar ist fertig, und ich hoffe, dass Sie vieles von dem anwenden konnten, was Sie bei der Lektüre dieses Buchs gelernt haben. Ich habe versucht, Ihnen in diesem Buch und ganz besonders im letzten Kapitel zu zeigen, was ich unter der Trennung von Markup und Layout verstehe. Sauberes XHTML in Verbindung mit modernem CSS ist die Basis jeder gelungenen Website. Wenn Sie das Buch gewissenhaft durchgearbeitet haben, dann haben Sie alles gelernt, was Sie wissen müssen, um ein guter Webautor zu werden.

Ich ermutige Sie hiermit ausdrücklich, das erworbene Wissen in der Praxis anzuwenden. Verwenden Sie die hier vorgestellten Lösungen bei Ihren eigenen Projekten und wagen Sie den Blick über den Tellerrand. Lesen Sie viel und bleiben Sie am Ball, wenn es um neue Entwicklungen geht. Es gibt viele gute Bücher auf dem Markt und viele Weblogs, deren tägliche Lektüre Sie Schritt für Schritt voranbringen wird. Helfen Sie mit, dass das Web ein Ort wird, an dem wir uns wohlfühlen können! Ich wünsche Ihnen viel Erfolg dabei.