Posted by Jukka K. Korpela on 02/24/07 11:20

Scripsit Jonathan N. Little:

> Because "color: red;" means the text color is red, but the HR element
> does not contain any text so it means nothing.

That might be the logical view, but browsers take different views on it. See
what happens (e.g. on IE 7) if you set hr { border: none; }. There is still
something - the horizontal rule.

> hr { border: 1px solid red; }

On IE 7, you get a rule that is two pixels high. If you just set border-top:
1px solid red, you get something a bit surprising.

My point is that <hr> is weird in CSS terms. The only reason for using <hr>
is that it acts as a more logical divider than a mere border, and it works
in non-CSS browsing situations. But it's difficult to style.

If you want <hr> to appear as 1px thin red rule, I guess the safest bet is

hr { border: none;
border-bottom: 1px solid red;
color:red;
height:0; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Back to original message]