CSS, DIV und TABLE - der ewige Streit, Sinn und Unsinn

---

Vorgeschichte

Wir schreiben das Jahr 2008, Mitte April. Ich surfe so durchs weltweite Datennetz und mehrfach gerate ich dabei auf Seiten, welche in XHTML 1.0 Strict! programmiert sind. Mit diesem Thema hatte ich mich bisher noch gar nicht befasst, meine Seite läuft seit 2000 (exakt in dieser Form seit 2002) im Quirks-Mode. Ohne das jemals eine Beschwerde hinsichtlich der Darstellung kam. Die Seite schien also perfekt auf allen Browsern zu laufen. Eigentlich war alles wunderbar.


Die Umstellung von Quirks auf XHTML 1.0 Strict!

Nach weiteren Recherchen zu XHTML beschloß ich also, meine Website auf einen neueren Stand zu bringen, und sie komplett in XHTML 1.0 Strict! unzuschreiben. Alles funktionierte soweit auch wunderbar, eigentlich musste ich mehr oder weniger nur einige inhaltslose Tags mit dem "/" schliessen, die Declaration des Doctype an den Anfang dazuschreiben und fertig.
Die Seite lief wunderbar in XHTML, nur das jetzt anstatt liebgewonnener Tags wie font und ähnliche jetzt mit CSS der Schriftgrad und Typ festgelegt wurde. Die Quittung folgte aber kurz darauf. Die Besucherzahlen sanken, obwohl die Seite optisch keinerlei Veränderungen erfahren hatte. Konnte es sein, dass manche viele Besucher meine XHTML Seite gar nicht mehr sehen konnten ? Oder aber, dass ich in den Suchmaschinen schlechter platziert wurde ?
Zweiteres hat sich dann als Hauptursache für den Besucherrückgang herausgestellt, und das obwohl ich mich doch vorher in Foren kundig gemacht hab, ob eine Umstellung auf XHTML sich nachteilig auswirken kann. Überall wurde es verneint, meist sogar das Gegenteil behauptet. Wohl kaum aus eigener Erfahrung... oder ?

Die Lösung... oder etwa doch nicht

Also recherchierte ich weiter zu dem Thema. Immer wieder stieß ich dann auf Diskussionen um Tabellen, Tabellenlayouts und wie schlecht dieses doch wäre, und dass eine Tabelle, wenn nicht wirklich nur eine Tabelle als solche dargestellt werden solle, in XHTML nichts zu suchen habe.
Bumm ... mein Design bestand zu 100% aus Tabellen. Also war das ja noch gar kein richtiges XHTML, was ich da geschrieben haben. Jedenfalls nicht im Sinne, wie es eigentlich gedacht war.
Also habe ich mich daran gemacht, auf meiner Seite (bis auf wirkliche Tabellen) alle Tabellen durch Divs zu ersetzen. Auch dies war innerhalb kurzer Zeit erledigt. Bis auf die Galerien dieser Seite. Dort sollten nämlich die Bilder horizontal und vertical zentriert in Felder dargestellt werden. Mit einer Tabelle kein Problem. Da meine Galerie aber keine Tabelle im klassischen Sinne darstellt, musste ich diese ja jetzt irgendwie mit Divs umsetzen. Mit CSS kenne ich mich ja schon einigermassen aus, aber ein Anweisung zum vertikalen zentrieren war mir bisher nicht geläufig. Es gab da zwar Befehle wie vertical-align, welche auch auf Bilder wirken, aber hier arbeitet jeder Browser irgendwie anders. Der Internet-Explorer in der Version 6 scheint dies sogar völlig zu ignorieren, und mit dem Surfen über 50% meiner Besucher. Ausserdem sollte nicht nur ein Bild alleine, sondern ein Bild mit Text und mit dem Einkaufswagensymbol zusammen zentriert werden.
CSS also, entwickelt für pixelgenaues Design, kann nicht mal ohne nervige Workarounds vertikal zentrieren. In meinen Augen ein Armutszeugnis. Es ist ja nicht so, dass es CSS noch nicht lange gibt. Trotz alledem habe ich es nach stundenlanger Recherche und einem eigentlich nicht nachvollziehbaren Workaround hinbekommen. Die Galerien laufen jetzt also ohne Tabellen.
Und jetzt, wo es läuft, frage ich mich, wie doof muss man eigentlich sein, eine Seite, welche auch mit Tabellen wunderbar barrierefrei gelaufen ist, und aufgrund des Workarounds jetzt auch noch kleiner von der Dateigrösse war, umzubauen....

Auslagern...

Um die Dateigrösse jetzt wieder etwas zu reduzieren, musste ich die CSS und Javascripte jetzt noch auslagern. Hatte ich, dumm wie ich war, nicht bedacht. War aber kein Problem, da die ganze Seite eh nur aus Bruchstücken besteht, welche durch PHP wunschgemäss zusammengebastelt wird. Also wurde CSS und die Scripte in externe Dateien geschrieben. Die Seiten wurden natürlich jetzt wieder etwas kleiner.
Aber was hat mir perönlich das Ganze bisher gebracht. Nun gut, ich kann jetzt anhand einer CSS-Datei schnell und unkompliziert das ganze Aussehen der Website verändern - was ich eigentlich nicht vorhabe. Und jetzt kommts : Das konnte ich vorher auch schon in nur wenigen Klicks. Also mir persönlich hat es gar keine Vorteile gebracht. Aber ich gehe jetzt mit der Zeit und meine Seite ist jetzt barrierefrei....

Barrierefreiheit, oder wie war das...

Was habe ich das im letzten Abschnitt geschrieben. Barrierefreiheit ? Lass ich mir eigentlich alles aufschwatzen in diesen Foren ?
Die Seite war barrierefrei, wo sie noch im Quirks-Mode mit Tabellendesign lief. Jeder Browser konnte Sie darstellen, sogar die Uralt-Browser aus dem Jahr 2000. Das war Barrierefreiheit. Ganz zu schweigen von der persönlich Barriere des vertikalen Zentrierens. Ganz zu schweigen von kleinen Abweichungen in der Darstellung bei den verschiedenen Browsern der aktuellen Generation. Und letztendlich stellt die XHTML-Version wohl auch eine Barriere für Suchmaschinen dar.
Nichts Böses ahnend schaue ich mir die Seiten dann zusätzlich noch im Cache einiger Suchmaschinen an. Was ist das ? Ein Wirrwarr von wild durcheinandergewürfelten DIV-Containern. Was ist denn jetzt wieder los ? Klar, im Cache der Suchmaschine wird dem eigentlichen Dokument noch ein kurzer Quelltext von der enstprechenden Suchmaschine vorangestellt, mit Informationen wann die Seite gecached wurde und so weiter. Dabei wird aber mein Quelltext weiter nach unten geschoben, und die Definition des Doctypes steht dann selbstverständlich auch nicht mehr am Anfang. Ohne diese Declaration wissen die Browser aber nicht, wie sie mit dem Quelltext umgehen müssen, und mein XHTML wird wieder im Quirks-Modus dargestellt. Dies führt dann leider zu nicht unerheblichen Unterschieden. Ich hoffe mal, die Suchmaschinen sehen dann nicht den Mist, der dabei rauskommt.
Besonders mit margin-auto zentrierte Bereiche werden denn vom IE völligst ignoriert. Nun muss ich also auch noch für den Suchmaschinencache optimieren, damit es auch dort vernünftig dargestellt wird. Also noch ein wenig DIVS mit text-align:center zentriert. So wie es eigentlich überhaupt nicht XHTML und CSS konform ist. Ich bin begeistert...
Denkt wirklich noch jemand, dass Suchmaschinen noch auf tags wie h1 etc. reagieren ? So einfach ist es nicht. Früher da stand als Überschrift ein font size=6 UEBERSCHRIFT /font und ich glaube die Suchmaschinen konnten dies sehr genau auslesen. Aber der Schriftformatierung mit CSS können sie angeblich, glaubt man den Foren, nicht folgen. Warum sollten die Suchmaschinen also h-tags noch ernst nehmen, wenn sie eh nicht wissen, wie der darin enthaltene Text dargestellt wird ?

Was habe ich daraus gelernt...

Na ja, zumindest habe ich meine CSS und XHTML Kenntnisse ein wenig aufgefrischt. Und um die Seite für alle (!!), Besucher mit älteren Browsern, mit neueren und den Suchmaschinen wieder möglichst barrierefrei zu machen, wird sie wieder eine Quirks-Seite werden. Back to the roots (oder tables)....