Arne: <hr>-Tag mit CSS formatieren

Beitrag lesen

Hallo Forum!

Für mein aktuelles Programmiereffekt, verwende ich horizontale Linien um die Seite zu gliedern. Nun möchte ich aber, dass diese formatierbar sind und auch noch auf allen Browsern möglichst ähnlich aussehen. Allerdings wollte ich auf formatierende Attribute im <hr>-Tag verzichten, zum einen um nicht jedes mal aufs neue alles anzugeben, zum anderen weil ich eigentliche alle Formate des gesamte Projekts über eine einzige .css-Datei regeln möchte und nicht zuletzt wegen der Reglements für HTML 4.01 strict...
Das ganze erweist sich als nahezu unmöglich.

Genau genommen möchte ich folgendes erreichen:
Meine Seite hat die Hintergrundfarbe #D0D0D0
Die Linien sollen eine Gesamthöhe von drei Pixeln haben, davon 1 Pixel Rand, dieser soll einen 3D-Effekt nach 'innen' haben, d.h. der obere und linke Rand dunkles grau, der untere und rechte helles grau.
Der eigentliche Teil der Linie soll die Farbe #006000 haben.

Dafür habe ich in der .css-Datei zunächst folgendes gemacht:

hr {
  height:3px;
  background-color:#006000;
}

Opera 6.01 zeigt mir nun genau das an, was ich oben wollte, der ganze REst der Browser nicht.
NS 4.78 zeigt graue Linien,
Mozilla 1.0 RC 1 und IE 5.0 schwarze.
IE habe ich mit color:#006000; wenigstens dazugebracht, mir die ganze Linie grün anzuzeigen(ohne Rahmen).

Ich habe nun versucht, das Layout mit CSS genauer zu umschreiben, dabei kam heraus:

hr {
  height:3px;
  color:#006000;
  background-color:#006000;
  border-width:1px;
  border-style:inset;
  border-color:#0E0E0E;
}

Mozilla blieb beim schwarzen Balken, IE zeigt mir zwar nur noch einen Pixel grün, aber dafür keinen Rand mehr, wodurch das ganze optisch zu dünn ist.
NS 4.78 zeigt mir unter der grauen Linie noch ein hübsches kleines Kästchen mit einem Inset-Rand... Das möchte ich auf keinen Fall!
Außerdem hat mir Opera das ganze Teil jetzt mit einer Gesamthöhe von 5px angezeigt, also 3px für den grünen Teil...

Kann man dagegen irgend etwas machen, oder muss ich mit der Tatsache leben, dass CSS-Eigenschaften für <hr>s von einigen Browser-Entwicklern (z.B. Mozilla) schlicht vergessen wurden? Vielleicht liegt es ja da dran, dass der wunderhschöne und simple <hr>-Tag bei WEb-DEsigner etwas verpönt ist...

Ich bin euch dankbar für jede Hilfe!

Gruß,
Arne.