Höhe HR - CSS-Experten: immer 7px?

[MudGuard]

Hi,

Der IE hat da aber andere Vorstellungen, zwischen rot und gelb sind jeweils 7px, die Gesamthöhe des Bereichs zwischen den roten Flächen somit 15px.
Gibt es somit keine browserübergreifende Lösung, diesen manchmal nervigen Abstand loszuwerden?

Browserübergreifend schon.
Nach etwas Experimentieren hab ich einen Weg gefunden, daß es auch browser- und IE-übergreifend klappt:

HTML:
<div class="vorher"></div>
<hr>
<div class="nachher"></div>

CSS:
.vorher  { margin-bottom:0;                                        background-color:silver;height:30px; }
.nachher { margin-top:0;                                           background-color:silver;height:30px; }

hr { height:1px; margin:0; border:none; padding:0;                 color:red;background-color:red; }

* html hr  { margin-top:-7px; }
* html .nachher { margin-top:-13px;                                height:30px; }

Für normale Browser: Element vorher bekommt unteren margin 0, Element nachher bekommt oberen margin 0, das hr bekommt margin und padding 0, keine border, Höhe 1 (zum Färben Vorder- und Hintergrundfarbe, da es hier Unterschiede zwischen den Browsern gibt)
Dann die Korrekturen für den IE:
Das hr bekommt oberen margin -7px, damit es den Gates-gegebenen Abstand nach oben verliert.
Das folgende Element bekommt einen oberen margin von -13px.
Der Wert für diesen Margin scheint sich aus max(-7, 14-heightvomhr) zu berechnen.
Aus mir schleierhaften Gründen muß die height für das nachfolgende div erneut angegeben werden, sonst stimmt sie im IE nicht.

cu,
Andreas