Das Inter­net bie­tet vie­le WordPress-Themes zum Her­un­ter­la­den, mit denen man sei­nen eige­nen Blog optisch gestal­ten kann. Ist jedoch mehr Indi­vi­dua­li­tät erwünscht, muss man sich die Mühe machen und ein eige­nes The­me gestal­ten. Neben Kennt­nis­se in einem moder­nen Gra­fik­tool, wie zum Bei­spiel in Ado­be Pho­to­shop und dem nöti­gen gra­fi­schen Fein­ge­fühl, sowie Grund­kennt­nis­se in PHP, ist auch das Stu­di­um der Doku­men­te auf der WordPress-Webseite zum The­ma Design und Lay­out erfor­der­lich. Frü­her oder spä­ter stößt man unter Umstän­den auf das Pro­blem, dass sei­ne Sei­te von den ein­zel­nen Web­brow­sern mit leich­ten Abwei­chun­gen dar­ge­stellt wird. Abstän­de und Brei­ten­an­ga­ben schei­nen unter­schied­lich inter­pre­tiert zu werden.

CSS-Default-Werte

Die ein­zel­nen Brow­ser zei­gen einen Inhalt mit unter­schied­li­chen Vor­ga­be­wer­ten an. Abstän­de zwi­schen Absät­ze und Über­schrif­ten, sowie Schrift­grö­ßen wei­chen leicht von­ein­an­der ab, zumin­dest wenn die­se nicht expli­zit in einem Style-Sheet defi­niert wer­den. Um zu ver­mei­den, dass eine CSS-Definition zur Hälf­te mit Nor­mie­rungs­wer­ten bestückt ist, emp­fiehlt es sich, eine extra Defi­ni­ti­ons­da­tei für das Zurück­set­zen aller Wer­te anzu­le­gen und ein­zu­bin­den. Hier bie­ten sich die YUI-CSS-Definitionen von Yahoo (BSD Licen­se) zum Zurück­set­zen der Abstän­de (Reset) und Nor­mie­ren der Schrift­grö­ßen (Font) an. Lei­der wer­den hier soge­nann­te CSS-Browserweichen ein­ge­setzt, was dazu führt, dass das CSS nicht vali­de ist.
Wem klei­ne Abwei­chun­gen in der Font-Normierung nichts aus­ma­chen, kann von mir das Reset-Style-Sheet “style_reset.css” her­un­ter­la­den und in sei­ne Pro­jek­te ein­setz­ten (BSD Licen­se). Der Vor­teil die­ser Defi­ni­ti­on besteht dar­in, dass sie die W3C-CSS-Prüfung besteht (sie­he Icon im Fuß­be­reich)! Die­ses CSS kann dann mit­tels @import url('style_reset.css'); am Anfang des jewei­li­gen Haupt-Style-Sheets ein­ge­bun­den wer­den. Danach soll­te aller­dings dar­auf geach­tet wer­den, dass alle Schrift­grö­ßen nur noch pro­zen­tu­al ange­ge­ben wer­den. Wel­che Pro­zent­wer­te für wel­che Grö­ßen­pi­xel ste­hen wird in der CSS-Datei als Kom­men­tar aufgelistet.

CSS-Box-Modell

Lei­der inter­pre­tiert der Micro­soft Internet-Explorer ⁵⁄₆ das CSS-Box-Modell eines HTML-Elements mit fes­ter Brei­ten­an­ga­be etwas anders, als es ursprüng­lich gedacht war. 

CSS Box Model Unter­schie­de beim IE, © Mat­thi­as Brusdeylins

Inner­halb sei­ner Brei­te lie­gen der sicht­ba­re Rah­men (Bor­der), sowie der inne­re Abstand (Pad­ding) eines Ele­men­tes. Dies bedeu­tet (und dies auch nur sicher, wenn die Brei­te ange­ge­ben wur­de), je grö­ßer die­se bei­de Para­me­ter sind, um so weni­ger Platz bleibt für den Inhalt eines Ele­men­tes. Der CSS-Standard defi­niert die Inter­pre­ta­ti­on der Brei­ten­an­ga­be hier anders. Die Brei­ten­an­ga­be gilt dem Inhalt. Rah­men, sowie inne­rer und äuße­rer Abstand (Mar­gin) lie­gen außer­halb die­ser Brei­ten­an­ga­be. Man muß sie also zu die­ser Anga­be addie­ren, um die kom­plet­te Brei­te zu ermit­teln. Wel­ches der bei­den Vor­ge­hen intui­ti­ver ist, vor allem auch mit dem Wis­sen, das die Hin­ter­grund­far­be bzw. das Hin­ter­grund­bild auch noch im Padding-Bereich sicht­bar ist, sei mal dahin­ge­stellt. Die unter­schied­li­chen Inter­pre­ta­tio­nen des CSS-Box-Modells erschwe­ren das Gestal­ten einer Web­sei­te bzw. das Erstel­len von WordPress-Themes, wel­che in der Regel aus einer Kom­bi­na­ti­on meh­re­rer DIV-Elemente besteht.
Es gibt unter­schied­li­che Her­an­ge­hens­wei­sen, um die­ses Pro­blem in den Griff zu bekom­men. Eine besteht in der Defi­ni­ti­on unter­schied­li­cher Brei­ten­an­ga­ben, eine für den Inter­net Explo­rer und eine für die rest­li­chen Brow­ser. Dies kann mit so genann­ten CSS-Browserweichen (CSS-Hacks) in einer glo­ba­len Style-Sheet-Definition erreicht wer­den. Da sol­che CSS-Dateien aber nicht Stan­dard­kon­form sind und auf Interpretations-Schwächen der ein­zel­nen Brow­ser basie­ren, ist davon abzu­ra­ten. Eine wei­te­re Mög­lich­keit besteht im Ein­satz von Kommentar- bzw. PHP-Browserweichen. Bei­spie­le hier­für fin­det man in dem Arti­kel “PNG im Inter­net Explo­rer“.
Will man aller­dings nicht zwei CSS-Dateien pfle­gen, gibt es noch eine wei­te­re Her­an­ge­hens­wei­se. Bei­de Inter­pre­ta­tio­nen des CSS-Box-Modells haben eins gemein­sam: der äuße­re Abstand (Mar­gin) liegt wirk­lich außer­halb der Brei­ten­de­fi­ni­ti­on. Ver­zich­tet man nun auf den Rand (Bor­der) und den inne­ren Abstand (Pad­ding) kom­plett (Wert = 0px, oder Ein­satz von style_reset.css, s.o.) wer­den die Anga­ben von allen Brow­sern gleich inter­pre­tiert. Um nun auch einen inne­ren Abstand in einem DIV-Element zu rea­li­sie­ren, muss ein wei­te­res DIV-Element, wel­ches den eigent­li­chen Inhalt trägt, in die­ses gelegt werden. 

CSS Box Model — Pad­ding Simu­la­ti­on, © Mat­thi­as Brusdeylins

Der Margin-Wert des inne­ren DIVs ent­spricht dann dem ursprüng­li­chen Padding-Wert. Jetzt muss noch eine Eigen­art der ver­ti­ka­len Margin-Werte behan­delt wer­den. Wie im CSS 2.1 Stan­dard beschrie­ben schlägt hier das so genann­te Collapsing-Margins zu, was dazu führt, dass der “margin-top” Wert des inne­ren DIVs ger­ne kom­plett igno­riert wird. (Der Internet-Explorer ⁵⁄₆ hält sich hier nicht an den Stan­dard und ord­net die Ele­men­te wie erwar­tet an. Er addiert ver­ti­ka­le Margin-Werte grund­sätz­lich auf, was meist zu uner­wünscht grö­ße­ren Abstän­den zwi­schen Ele­men­ten führt.) Hier hilft ein Trick, wel­cher auch aus dem Stan­dard her­aus­ge­le­sen wer­den kann: Die ein­zel­nen DIVs bekom­men eine Overflow-Definition mit einem Wert ungleich “visi­ble”. Da in der Regel kein Text über die DIV-Content-Grenzen hin­weg ange­zeigt wer­den soll, kann hier die Defi­ni­ti­on overflow: hidden; ein­ge­bun­den wer­den. Auf die­se Art und Wei­se kön­nen ein­heit­li­che WordPress-Themes mit vali­den CSS-Definitionen erstellt werden.

BluePrintCSS

Eine schö­ne Samm­lung nutz­ba­rer CSS-Definitionen lie­fert auch Goog­le mit ihrem Blue­PrintCSS. Der Schwer­punkt die­ses CSS-Frameworks liegt in der Typo­gra­phie. So wird auch ein Style­sheet für den Druck gelie­fert. Auch zieht die Idee eines Grid-Layouts aus dem Print-Design-Umfeld in die Style­she­ets ein. Dadurch stellt ein Mehrspalten-Layout kein Pro­blem mehr dar. Die Eigen­ar­ten des Internet-Explorers wur­den hier in einem eige­nen Style­sheet sau­ber getrennt abgelegt.