Manchmal kann es nötig sein, das <hr> Element mit horizontalen Rändern wie andere Elemente zu verändern. Es taugt aber auch ebenso gut, um den Anfang oder das Ende diverser Abschnitte zu markieren. Die Lesbarkeit von Dokumenten, selbst in alten Browsern oder auch in Browsern die kein CSS darstellen können, wird wesentlich erhöht.

Auf der anderen Seite sieht ein einfaches <HR> Element auch nicht unbedingt schön aus, wenn es einfach nur ungestylt in schön durchformatierten Dokumenten verwendet wird. Die Formatierungen können problemlos per CSS vorgenommen werden. Dabei stößt man jedoch schnell auf das Problem das Ganze cross-browser kompatibel zu machen. Die nun vorgestellten Lösungen funktionieren nicht in älteren Browsern, sondern nur in Browsern ab IE5+, Opera 5+ und Mozilla/NN6.

Welche Eigenschaften funktionieren

Auf den <HR> Tag können eine ganze Menge verschiedener Eigenschaften angewendet werden :

  • Alle 3 Browser erlauben die Verwendung von width und height
  • Die border Eigenschaft funktioniert nur im IE und Mozilla einwandfrei. Leider werden die Formatierungen im Opera nicht korrekt angezeigt. (Siehe Beispiele unten).
  • Im IE funktioniert die color Eigenschaft.
  • Opera und Mozilla verwenden die background-color Eigenschaft.
  • Alle 3 Browser gestatten es ein Hintergrundbild mit der background-image Eigenschaft festzulegen. Wobei der IE sowie Opera doch noch Ihre Probleme haben. (Siehe letztes Beispiel).

Beispiele

Für die hier gezeigten Beispiele wird folgende Vorgabe verwendet:

1
2
3
4

hr {
  border: 0;
  width: 80%;
}

Somit werden alle verwendeten <hr> Tags mit einer Breite von 80% dargestellt. Außerdem wird der Rahmen auf 0px gesetzt. IE und Opera stellen das Element identisch dar. Mozilla zeigt nichts an, da er den Rahmen zur Anzeige benötigt. Im aktuell verwendeten Browser sieht das jetzt so aus :

Wir bringen Farbe ins Spiel

Um eine einfache rote Linie zu erhalten fügen wir folgenden Code zur Definition hinzu:

1
2
3

color: #f00;
background-color: #f00;
height: 5px;

Das Ergebnis ist dann diese Linie :

Damit das in allen Browsern gleich aussieht, müssen die color und die background-color Eigenschaft verwendet werden. Opera hat aber Probleme mit der Darstellung. Es wird immer noch ein Strich von 1 Pixel Dicke angezeigt. Damit das anders wird, muß eine Höhe von mehr als 3px verwendet werden.Daher muß hier die height Eigenschaft verwendet werden. Mac User sollten mal ein Auge auf den Hinweis 1.1 werfen.

Die nächsten 3 Beispiele zeigen 3 Andere, in den verschiedenen Browsern gut aussehende Effekte:

Als nächstes kommt eine dünne, rote (leider schwarz in Opera), durchgehende Linie mit einer Höhe von 1px :

1
2
3

color: #f00;
background-color: #f00;
height: 1px;

Hier kommt ein leeres, rotes Rechteck, 10px hoch:

1
2
3
4

border: 1px solid #f00;
color: #fff;
background-color: #fff;
height: 10px;

2 dünne rote Linien (Opera zeigt leider ein Rechteck). Die Obere ist gepunktet, die Zweite durchgehend:

1
2
3
4
5

border-top: 1px dashed #f00;
border-bottom: 1px solid #f00;
color: #fff;
background-color: #fff;
height: 4px;

Pages: 1 2