Die Idee, die dahinter steckt ist folgende: Mit JavaScript wird das zu verändernde <select>-Element angesprochen. Dies kann entweder mit einer Schleife erfolgen, welche das ganze Dokument durchsucht oder selbstverständlich auch explizit für einzelne Elemente. Die entsprechenden Elemente werden anschließend durch einen neuen HTML-Code ersetzt, der ungefähr so aussehen könnte:

<div class="style-me">
	<span class="show-text" id="show-text"></span>
	<img src="dropdown-arrow.gif" alt="" />
	<select>...</select>
</div>

Das ursprüngliche <select>-Element wird hierbei nicht weg geworfen, sondern per CSS mit position: absolute; bzw. position: relative; über das neue <div> gelegt und anschließend kann die Opazität auf 0 gesetzt werden.

Hier ein kleines Beispiel zur Verdeutlichung. Links das fertige Element. Rechts zur Demonstration mit einem halbdurchsichtigen <select>-Element.

Dadurch, dass die Selectbox noch existiert und oben liegt, kann der User ganz normal darauf klicken und in der Selectbox die gewünschte Option auswählen. Die Selectbox erhält dann den entsprechenden Wert, der beim Absenden des Formulars regulär mitgeschickt wird. Wir müssen lediglich mit einem onchange-Event den Text des gewählten Wertes auslesen und in unser neu erstelltes HTML-Element schreiben.

Wir können anschließend das neue <div>-Element beliebig mit CSS manipulieren, eine Hintergrundgrafik vergeben, die Schrift ändern. Außerdem habe ich im Beispiel-Code oben eine Grafik mit eingefügt. Diese kann beliebig gewählt werden, so dass die perfekte Illusion einer gestylten Selectbox entsteht.

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; }