Das CSS Problem in WordPress mit IE6 !

Weiterhin kämpfe ich mit dem Design des neuen Blogauftrittes. Besonders ärgerlich ist ein mysteriöser Fehler im Internet Explorer 6. Gemäss Statistik greifen 93% aller Besucher mit Firefox oder IE auf den Blog zu. Beim Internet Explorer ist die Verteilung bei 57% IE6 und 42% IE7, 1% ältere Versionen. Kurzum das Web Layout muss in Firefox, IE 7 und IE 6 anständig dargestellt werden.Auf dem ersten Bild ist ersichtlich, wie der Post-Titel mit dem Post-Datum, dem Post-Inhalt und der Post-Fusszeile aussehen sollte und im IE7 sowie unter Firefox angezeigt werden. Auf dem zweiten Bild der erwähnte Fehler Moneygram agent im IE 6. Innerhalb des WordPressloops (das heisst von Post zu Post) verschiebt sich der Post-Titel und das Post-Datum um einen Pixel nach links, dies während neun Posts, dann ist alles wieder ok und das Ganze beginnt von vorne.

Im Ausschlussverfahren habe ich stundenlang gesucht und beinahe den letzten Nerv verloren, bis ich auf folgendes gestossen bin: Der Post-Inhalt ist auf zwei Seiten, die Post-Fusszeile auf allen Seiten mit einer gepunkteten Linie umrandet, damit ich keine Doppellinien zwischen den beiden Boxes erhalte. Sobald ich nun den Post-Inhalt auf der unteren Seite umrande, verschwindet der Fehler. Lösung: Post-Inhalt auf drei Seiten umrandet, Post-Fusszeile ohne oberen Rand. Problem gelöst aber nicht verstanden.

In CSS sieht dies so aus:

.post-content { /*Box Post-Inhalt*/

border-left:#bbbbbb 1px dotted;

border-right:#bbbbbb 1px dotted;

border-bottom:#bbbbbb 1px dotted; /*ACHTUNG: Nicht entfernen, sonst Bug IE6!*/

font:0.9em/1.5em "Trebuchet MS",Verdana,Tahoma,Arial,sans-serif;

padding:35px 20px 20px 20px; }

.post-footer { /*Box Post-Fusszeile*/

background-color:#eeeeee;

border-left:#bbbbbb 1px dotted;

border-right:#bbbbbb 1px dotted;

border-bottom:#bbbbbb 1px dotted;

padding:5px 0; }

Damit bin ich nun designmässig ready, die meisten Funktionalitäten sind vorhanden und nun geht es an einen Testimport des bisherigen Inhaltes auf den neuen Blog. So einfach ist aber auch das nicht. Fortsetzung folgt…