Relative Einheiten/Abstände und die Tücken der Skalierbarkeit

[molily]

Hallo zusammen,

Folgende Aufgabenstellung:
Ein Dokument enthält eine Überschriftenhierarchie, jede der Überschriften grenzt direkt am Container, in diesem Fall das body-Element, welcher zu diesem Zweck mit padding:0 formatiert ist, die Überschriften folglich zwangsläufig mit margin-left:0 und margin-right:0; Die Überschriften sollen oben und unten einen Rahmen haben, welcher horizontal direkt an den Rahmen des Containers grenzt. Der Text aller Überschriften soll gleich weit vom linken Rand entfernt sein.

Schematisch:

<img src="http://dj5nu.bei.t-online.de/fanhost/css-scale.png" border="0" alt="">

Soweit wäre es trivial, jetzt jedoch der Zusatz, welcher die Probleme bringt: alle Größen sollen sich an der von dem/der Benutzer/in eingestellten Schriftgröße orientieren. Damit fällt bei unterschiedlicher Schriftgröße der Überschriften padding-left:X(em|ex|%) weg, da sich dies auf die aktuelle Schriftgröße bezieht, welche variiert. Damit entstünden unterschiedliche Einrückungen, relativ zur Schriftgröße:

Überschrift erster Ordnung
   Überschrift zweiter Ordnung
 Überschrift dritter Ordnung

Nun lässt es sich unterbinden, indem man das Markup mit semantisch wertlosen Elementen vermurkst, namentlich div und span:
Markup:
<h1><span>Überschrift erster Ordnung</span></h1>
Styles:
h1 {font-size:1em; padding-left:1em; margin:... 0; border-style:solid none; border-width:thin 0; ...}
h1 span {font-size:1.5em; ...}

Eine weitere Methode:
Markup:
<div class="headline"><h1>Überschrift erster Ordnung</h1></div>
Styles:
div.headline {margin-left:1em; padding:0; border-style:solid none; border-width:thin 0; ...}
h1 {font-size:1.5em; ...}

Diese Workarounds sagen mir jedoch nicht zu und die grundlegende Skalierbarkeit möchte ich auch nicht aufgeben, dann wäre eher das haarkleine Berechnen von die Unterschiede kompensierenden Abständen für jede Überschriftsebene angemessener, was jedoch auch auf eine sehr umständliche Näherungslösung hinausläuft, aber wahrscheinlich dennoch am naheliegendsten sein mag. Sicherlich wäre es kein herber Verlust, wenn ich speziell diesen Abstand im screen-Stylesheet mit px angebe, dennoch brächte es das Konzept durcheinander und in vielen Fällen ist ein Missverhältnis zwischen den relativen und quasi-absoluten Werten vorprogrammiert. Vor allem beispielsweise im Internet Explorer, bei welchem die schnelle Vergrößerung und Verkleinerung der Schriftgröße nur relative Werte betrifft, würde vermutlich einiges verrutschen beziehungsweise klaffen oder kleben.

Vermutlich gibt es keinen eleganten beziehungsweise einfachen Weg zur Lösung der Aufgabe, insofern ist dieser Thread zumindest (ZUR INFO) ;), dennoch würde ich mich über Erfahrungsberichte und Meinungen freuen.

Grüße,
Mathias