HTML5-Verwirrung: main vs. div, sectioning vs. grouping

[Der Martin]

Hallo,

meine Site hat folgenden HTML5-Grundaufbau:

header
main
  section
  article
  article
  article
footer

Das root-Element html hat über CSS eine Hintergrundfarbe. Das soll der Haupthintergrund des Dokumentes sein bis unten hin zum footer. Der footer bekommt über CSS eine eigene Hintergrundfarbe. Unerwünschtes Ergebnis: die footer-Hintergrundfarbe erstreckt sich vom footer aus nach oben über den kompletten main-Bereich! Nur der header hat die Hintergrundfarbe von html:-(

zeig doch mal den Original-Quelltext deines Dokuments. Was du beschreibst, klingt klar nach einem Fehler - entweder einem von dir (Struktur), oder einem vom Browser. Apropos Browser: Mit welchem hast du dieses Verhalten beobachtet?

Wenn ich main durch div ersetze, klappt es wie gewünscht!

Das ist nicht logisch erklärbar.

Liegt es bei main daran, dass es kein sectioning-Element, sondern ein grouping-Element ist? Aber div ist doch auch ein grouping-Element!? Warum klappt es beim einen und beim anderen nicht?

Gute Frage. Theoretisch sollte es aus CSS-Sicht keinen Unterschied geben. Es sei denn ... Es sei denn, der Browser würde das main-Element nicht kennen und komplett ignorieren (vielleicht ein IE im Kompatibilitätsmodus). Allerdings sollte man annehmen, dass ein Browser, der main ignoriert, ebensogut header und footer ignoriert.
Hast du mal den DOM-Baum mit den browsereigenen Developer-Tools (oder Firebug) angesehen? Sieht die Elementstruktur da richtig aus?

So long,
 Martin