Unterschiedliche Darstellung im IE und Firefox

Ich habe in der style.css den Hintergrund bei der “#body”-Definition in der gleichen Farbe wie die Schrift eingefärbt. Als ich mir diese Seite anschließend im Internet Explorer ansah, stellte ich fest, dass er die gepunkteten Linien um den Header, die Beiträge und die Sidebar nicht gepunktet, sondern mit komischen kleinen Kreuzchen anzeigt. Daher habe ich in der style.css die Umrandung bei #header, .single und #sidebar in “border: 3px solid #cccccc;” geändert. Gefällt mir nicht hundertprozentig, aber sieht erst mal besser aus als die Kreuzchen:

Header anpassen

Der Header soll ebenfalls einen weißen Hintergrund und einen gepunkteten Rand haben, außerdem soll er nach unten einen Abstand von 20 Pixeln bekommen.
Daher füge ich in der style.css ein:

Schriftfarben ändern

Die Schriftfarbe für den Text der Beiträge ändere ich im “#body”-Bereich, ich habe mich mit “color: #006666;” für einen Grünton entschieden.
Die Überschriften h1 (der Blogtitel), h2 (die Beitragstitel) und h3 (die Überschriften in der Sidebar) bekommen die gleiche Farbe. h2 und h3 bekommen, wie bei h1 schon hier geschehen, den Zusatz “text-decoration: none;”, damit sie nicht unterstrichen sind.

Die Links sollen ebenfalls in dieser Farbe dargestellt werden, zusätzlich orange unterpunktet und mit orangener Schriftfarbe beim Überfahren mit der Maus. Allerdings soll das nur für die Links in den Beiträgen gelten, nicht für alle anderen. Daher setze ich in der index.php die Zeile, die mit “php the_content” anfängt, in einen weiteren “div”-Container mit der Klasse “beitrag”. Der style.css füge ich dann hinzu:

weiterlesen…

Optische Abgrenzung einzelner Beiträge

Um die einzelnen Beiträge optisch voneinander abzugrenzen, möchte ich sie jeweils mit einem Rahmen umgeben. Dazu muss ich in der index.php zunächst festlegen, was dieser Rahmen umfassen soll. Ich möchte den jeweiligen Beitrag mitsamt der Kommentare eingerahmt haben. Um das zu erreichen, setze ich den Text ab der h2-Überschrift (dem Beitragstitel) bis hinter den php-Befehl, der die Kommentare aufruft (comments_template) in einen “div”-Container, dem ich class=”single” zuweise. Diese Klasse definiere ich in der style.css mit einem weißen Hintergrund, einem gepunkteten Rand, einem Innenabstand und einem Abstand nach unten:

Den gleichen Rand füge ich auch bei “#sidebar” ein.