| 
	
 | 
 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/
 
  
Navigation:
[Reply to this message] 
 |