06. März 2008

Wordpress Theme und das margin: auto Problem im IE

Viele kennen bestimmt das Wordpress Grundgerüst bzw. das Vorlagen Theme für Wordpress von texto.de, um seine eigenen Layouts + Designs Wordpress gerecht zu gestalten. Nun bin ich zum zweiten Mal auf einen seltsamen Fehler gestoßen, als ich das Layout für ein neues Webprojekt umgesetzt habe. Ich gestalte zuerst immer ein Layout ganz normal im Texteditor und gucke immer im Wechsel im Firefox und dem Internet Explorer, ob auch alles wie gewünscht dargestellt wird. Dies tat es auch. Sobald ich aber mein Layout an die Vorlage von texto.de angepasst habe, wurde mein Theme im IE 6 und 7 nicht mehr richtig dargestellt.

Ich schaute mir mehrmals verzweifelt den Quellcode an, um Unterschiede ausfindig zu machen. Jedoch alles ohne Erfolg. Mein Layout umfasste ein Schnutz DIV Element, einen Wrapper. Dieser war wie folgt definiert:
#gitter {
width: 900px;
background-color: #FFF;
padding-bottom: 25px;
margin: 20px auto;
overflow: hidden;
}

Bei margin: 20px auto; soll also das Layout mittig von links und rechts gesehen, platziert werden. Die Startseite war im Internet Explorer jedoch links und eine Spaltenbreite stimmte um 50px nicht mehr. Klickte ich auf einen Artikel war alles wieder zentriert. Also musste was im XHTML Quelltext und nicht im CSS falsch sein. Also kommentierte ich immer weiter einen DIV Block aus. Aber es wurde nicht besser. Am Ende habe ich alles auskommentiert und das Layout war im IE 7 immer noch links ausgerichtet.

Alle XHTML und CSS Fehler wurden entfernt und somit Strict valide gemacht. Aus Verzweiflung und Langeweile habe ich einmal alle Kommentare aus dem Wordpress Grundgerüst entfernt. Was die ganzen PHP Befehle etc. bedeuten ,weiß ich ja bereits sehr gut. Um zu kontrollieren, dass ich nichts falsches entfernt habe, öffnete ich noch einmal die Seite im Browser. Und aufeinmal dachte ich, ich spinne. Alles wird zentriert dargestellt. Das margin: auto Problem im IE war somit Geschichte.

Nach mehrfachem Ausprobieren konnte ich den Fehler ausfindig machen. In der index.php der Vorlage störte der Kommentar in der ersten Zeile, bevor der Header geladen wird:

<!--include header.php--><?php get_header(); ?>

Nachdem ich überall die Kommentare vor dem Header Aufruf entfernt habe, gibt es keine Probleme und alles wird optimal dargestellt. Dumm nur, dass dies ein zweites Mal mehrere Stunden gedauert hat, bis ich die Ursache gefunden habe. Naja, wenigstens wurde die fehlerhafte Breite von 50 Pixel wieder von alleine gelöst, so dass ich nicht extra für den Internet Explorer eine neue CSS Datei anlegen musste.

Einen Kommentar schreiben