Abhilfe gegen viele Probleme schafft das Open-Source-Projekt “ie7-js“. Durch einbinden einer JavaScript-Datei kann man entweder die Internet Explorer Versionen 5 und 6 kompatibel zu Version 7 machen oder gar die Versionen 5 bis 7 kompatibel zu Version 8. Welche Bugs behoben oder welche Features genau dazu kommen, zeigt diese Übersicht.

Nach ersten Tests bin ich ziemlich zuversichtlich, dass mir dieses Projekt in Zukunft die Arbeit erleichtern wird. Ich habe bis jetzt zwar erst die PNG-Funktionalität getestet, aber PNG-Files mit Alpha-Transparenzen im IE6 sehen zu können, hat mich schon begeistert.
Das Tool hat zwar Probleme, mit Hintergrund-Grafiken und background-repeat, aber wenn man es weiß, kann man solche Fälle umgehen und ggf. anders lösen.

Wer mehr wissen und ggf. selber testen und einsetzen will, findet alles was er braucht auf der ie7-js Projekt-Seite von Google Code.

Bei der Verwendung von <pre>...</pre> wird vom Browser die Formatierung exakt so wiedergegeben, wie Sie im Quelltext steht. Also Vorsicht bei langen Zeilen, diese werden auch als eine einzige Zeile dargestellt und können evtl. das Layout zerstören.

Mit dieser Anpassungen in den Styles wird der Quelltext dann auch noch optisch vom restlichen Beitrag abgerenzt:

pre {
	border: 1px solid #DADADA;
	background-color: #F5F5F5;
	color: #888888;
	padding: 8px;
}

Weitere Informationen, wie man Code passend in seine Beiträge integrieren kann, sind direkt bei WordPress zu finden.

Um das Problem mit der leichten Pflegbarkeit zu lösen, bot sich das Typo3-Contentelement “Tabelle” an. Hier lässt sich leicht eine Tabelle aufbauen, ohne über HTML-Kenntnisse zu verfügen und auch ein Wizard wird angeboten, um die Erstellung noch weiter zu erleichtern.
Für den Redakteur ist hier nur wichtig, dass er die Option “Position der Kopfzeile” auf den Wert “oben” setzt.

Dadurch wird die erste Zeile von Typo3 nicht als normale Tabellenzeile an den Browser gegeben, sondern in folgendem Format:

<thead><th>...</th><th>...</th><th>...</th></thead>

Der Head-Bereich einer Tabelle kann mit CSS gesondert gestylt werden um ihn als Überschrift kenntlich zu machen.

Mit Hilfe von sIFR können in HTML-Seiten Überschriften in jeder beliebigen Schriftart dargestellt werden. Dazu benötigt der Client lediglich JavaScript und das Flash-Plugin.

Mein erster Versuch, die sIFR-Datei einzubinden sah so aus:

... sSelector:".contenttable thead th" ...

und das Ergebnis so:

Scheinbar kann sIFR die Breite der <th>-Elemente nicht korrekt auslesen und dadurch die Schrift in der eingebetteten SWF-Datei nicht in die richtige Größe bringen. Abhilfe dieses Problems schuf ein kleiner Trick:

Im TypoScript fügte ich diese Zeile ein, wodurch der Inhalt aller Tabellenzellen automatisch noch in ein <p>-Element gefasst werden.

tt_content.table.20.innerStdWrap.wrap = <p>|</p>

Der sIFR-Code wurde entsprechend angepasst

... sSelector:".contenttable thead p" ...

und das Resultat sah so aus:

Die Breite wurde korrekt erkannt, die Schriftgröße innerhalb der sIFR-Datei stimmte, aber aufgrund eines anderen Styles hat das <p>-Element einen Abstand nach unten, der hier in der Tabelle nicht erwünscht ist.

Also wurde das <p>-Element durch ein <div>-Element ersetzt. Sowohl im TypoScript

tt_content.table.20.innerStdWrap.wrap = <div>|</div>

als auch im sIFR-Aufruf

... sSelector:".contenttable thead div" ...

Wodurch das Ergebnis schließlich so war, wie vom Kunden gewünscht:

Die weitaus geringere Herausforderung war die abwechselnde Hintergrundfarbe der Tabellenzeilen.

Die Zeilen werden von Typo3 schon automatisch abwechselnd mit den CSS-Klassen tr-odd bzw. tr-even versehen. Somit reichen wenige Zeilen in der CSS-Definition, um die abwechselnde Hintergrundfarbe zu erzeugen:

tr.tr-odd td { background-color: #EBEBEB; }
tr.tr-even td { background-color: #E1E1E1; }