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

[Sven Rautenberg]

Moin!

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.

Und das stimmt auch nicht. Du kannst problemlos und unabhängig von vorhergehenden oder nachfolgenden Elementen <h2> benutzen.

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ß...?

Die Lösung zu deinem Problem ist in der CSS-Formatierung zu suchen - und in den Standardwerten, die in jedem Browser den HTML-Elementen zugewiesen sind, und die du wahrscheinlich (wir kennen ja dein CSS nicht) nicht korrekt und/oder ausreichend auf dir genehme Werte gebracht hast.

Insbesondere "collapsing margins" sind ein Quell fortwährender Lustigkeit in der Entwicklung, weil sie sich höchst browserunterschiedlich und noch dazu meist unerwartet (wenngleich auch standardkonform) verhalten.

- Sven Rautenberg

[ottogal]

Moin Sven,

Die Lösung zu deinem Problem ist in der CSS-Formatierung zu suchen - und in den Standardwerten, die in jedem Browser den HTML-Elementen zugewiesen sind, und die du wahrscheinlich (wir kennen ja dein CSS nicht) nicht korrekt und/oder ausreichend auf dir genehme Werte gebracht hast.

Ich will jetzt nicht CSS-Code posten, gebe aber mal einen Link auf meine Dummy-Seite, dann kann man mit dem Web Developer des Firefox ja reinschauen - wenns grad nichts Wichtigeres zu tun gibt... ;-)

Viele Grüße und danke
ottogal

[Schuer]

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ß...?

Auch hier nochmal: das h1 ist nicht nötig.

Wenn's nicht am margin liegt, wie Sven anmerkt, kann es bei Überschriften gerne mal am line-height liegen, das größer als 100% ist und damit Platz nach unten benötigt.

Viele Grüße!
_ds

[ottogal]

Der Fehler war: Ich hatte für h2 gar kein font-size angegeben..., also den Browsern die Entscheidung überlassen - soll man halt doch nicht tun.

Danke, wieder was gelernt!
ottogal