Horizontale Linie mit CSS einfärben[IE|M|O|G]

von: Werner Zenk

Um eine Horizontale Linie (<hr>) mit CSS einzufärben, wird nicht wie oftmals
angenommen der CSS-Code background-color:.., sondern border-top:.. benötigt.

Leider zeigen die Browser noch Unterschiede in der Darstellung der horizontalen Linie an.
Hier zeige ich einen Lösungsvorschlag für das Problem.

Quelltext:

<style type="text/css">
hr{
 border: 0px; /* Für Firefox und Opera */
 border-top: solid 1px #FF0000;
 border-bottom: solid 1px #FFFFFF; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
}
</style>

<hr>

oder...

<style type="text/css">
hr{
 border: 0px; /* Für Firefox und Opera */
 border-top: solid 1px #FF0000;
 border-bottom: transparent;
}
</style>

<hr>

Beispiel:

Weitere Beispiele:

Die Horizontale Linie im HTML-Tag ändern

<hr style="border:solid 3px #00FFFF;
background-color:#0000FF; height: 10px; width: 400px;
text-align: left;">

Beispiel:

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 8 » aufmachen knut: border: 0; hätte gereicht, den Browsern ist es egal, ob 0px, 0em oder irgendwas. Ansonsten sehr guter Beitrag. Dankeschön! heiko: Gute Lösung und verständlich erklärt. darki777: Bis auf die Tatsache dass wenn man einen dickeren horizontalen Balken bei deinem Codebeispiel möchte, bzw. mal 2px/4px/etc. angibt, dieser dann nicht im IE funktioniert. Eine andere Möglichkeit die ich verwende wäre die hier: Werner: Ups, ich hatte leider einen Html-Filter eingeschaltet, daher wurde dein Beispiel nicht an mir übermittelt! (Html-Filter ist jetzt aus darki777: .horizontal line { display:block;border-width:0px;border-top:solid 2px #E1001A; background-color:transparent;margin:0;padding:0;}anwendbar auf div/span tags, z.B. einfach mfg darki Jörg: IE7 will bei mir noch ein height:1px;um die Linie dünn zu bekommen E-K-E: Sehr schön, danke! Funktioniert! hela: Die Non-IE-Browser stellen die Innenfarbe einer HR-Linie sehr wohl über die "background-color"-Eigenschaft dar, wenn man "border" auf Null setzt. Der IE macht das allerdings über die "color"-Eigenschaft.Also so geht es auch:hr { height: 1px; border: 0; color: red; background-color: red;} cannewitz: Oder Browser unabhängig in Form eines DIV anlegen. Diesem dann Höhe 0px und border-bottom 1px dotted #fff in der Style zuweisen. Bsp. .linie {height: 0px; border-bottom: 1px dotted #fff}
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

CSS Hyperlink #13

Übergangsfilter

Hover.- MouseOver-Technik - Drei verschiedene Button-Techniken, zum Beispiel für Menüs.

Masseinheiten für CSS

CSS Hyperlink #24

Linkrahmen von allen Bildern entfernen - Beim Verlinken von Bildern entstehen um die Bilder (hässliche) Rahmen. Mit dieser Anweisung können Sie diese Linkrahmen Dateiweit entfernen.

Transparente CSS-Filter für Bilder und Text

CSS Hyperlink #37

Button mit Hintergrundbild

CSS Hyperlink #1

CSS Hyperlink #3

Auswahllisten formatieren

CSS kürzen

Aufzählungslisten einfärben - Jedes zweite Listenelement bekommt eine andere Hintergrundfarbe.

Text in Blocksatz

Scrollende Tabelle …mehr