Flapsige Semantik wird im Layout bestraft?

[ottogal]

Hallo in die Runde,

dass XHTML 1.0 strict es sehr genau nimmt, sagt ja schon der Name. Aber dass man mit einem Darstellungsfehler bestraft wird, weil man eine h2-Überschrift ohne vorangehendes h1 verwendet, ist schon arg streng.

Konkret habe ich folgende Situation:

<div id="logo"><a href="~">~</a>
  </div>
    <ul id="menu">
      <li>&nbsp;</li>
    </ul>
  <div id="main">
  <h2>~~~~~~</h2>
  ...

(Auf den anderen Seiten der Website ist die Menüliste natürlich nicht leer, dies hier ist eine Dummy-Seite, die nur den leeren Menübalken anzeigen soll.)

Das div#logo hat eine grüne Hintergrundfarbe, das ul#menu ein dunkelgrünes Hintergrundbild, und das div#main ein Hintergrundbild, das mit repeat-x den Schatten des Balkens ergibt. So soll es aussehen:

Stattdessen erscheint jedoch zwischen dem dunkelgrünen Balken und dem Schatten eine weiße Lücke:

Ich habe lange gebraucht, bis ich dahinter kam, dass hier das Fehlen einer h1-Überschrift schuld ist: Es genügt, lediglich  <h1></h1>  einzufügen - ganz leer, nicht mal ein &nbsp; ist nötig.

Ich habe also kein Problem mehr - aber doch die Frage, wie das zustande kommt. Woher kommt die Lücke, wieso ist sie grad so groß...?

Danke für Erklärungen
ottogal