Hallo,
Subject: Darstellungsprobleme mit IE trotz validen Code
Validität ist in der Tat eine wichtige Voraussetzung dafür, daß es in den verschiedenen Browsern halbwegs gleich aussieht. Aber da die Browser -- speziell der IE -- so ihre Tücken haben, ist Validität alleine noch nicht ausreichend...
Im Firefox ist die Darstellung korrekt, im IE wird unter dem zweiten Teil der Blume und der Teaserbox mit Inhalt ein hellgrüner (fast schon weißer) Streifen dargestellt, der aber nirgends definiert ist.
Dir spielt die falsche Interpretation von "height" im IE einen Streich. Der IE interpretiert das als "min-height". Die Box an sich ist zwar leer, aber hat per Default trotzdem dieselbe Höhe wie wenn Text darin enthalten wäre. In den anderen Browsern verkleinerst Du diese Höhe durch "height". Bloß im IE hat das wie gesagt keine Auswirkung. Setze für diese Box eine recht kleine Schriftgröße, dann verschwindet diese Lücke auch im IE.
Apropos Lücke:
Im Opera ist eine recht große Lücke zwischen Deiner Headergrafik und der Navigation. Aus mir nicht bekannten Gründen benutzt Opera im Gegensatz zu anderen Browsern für das <p class="header">lars-thielecke.de</p> einen großen unteren margin. Gib Deinem .header mal ein margin-bottom:0;, dann verschwindet auch diese Lücke.
Und wenn wir schon bei der Mißinterpretation von height im IE sind... ;-)
Damit hast Du auch eine Möglichkeit, dem IE für Deinen Contentbereich eine Mindeshöhe zu geben. Du mußt nur dafür sorgen, daß andere Browser dieses height für den IE nicht sehen -- z.B. durch CSS-Hacks.
Viele Grüße
Carsten