Webdesign- und Freeware-Tipps
HR (horizontal ruler) richtig stylen / formatieren
Oft benötigt man auf Webseiten horizontale Trennlinien, um etwas Übersichtlichkeit zu schaffen. HTML bietet dazu das Element <hr /> an. Leider stellen die aktuellen Browser dieses Element sehr unterschiedlich dar und interpretieren die verschiedenen Attribute, die möglich sind, in unterschiedlicher Weise.
Zumeist möchte man diese Linie sehr dünn, am besten 1 px hoch, gestalten. Damit dies in allen Browsern auch gleichmäßig funktioniert musst du folgenden CSS-Code verwenden:
hr{
background-color: #000; /* Farbe für Opera und Firefox */
color: #000; /* Farbe für Internet Explorer (IE) */
border: 0;
height: 1px;
}
Hier noch einige Beispiele:
1px hoch - schwarz
5px hoch - grau - dunkelgrauer Rahmen (Opera macht die Linie 7px hoch)
3px hoch - blau
Diese Beispiele sollten in allen modernen Browsern (fast) gleich aussehen.
Achtung: Der Internet Explorer fügt an jeder Trennlinie imaginäre Abstände von 7px oben und unten an der Trennlinie ein, die auch nicht mit margin: 0; entfernt werden können.
