Posted by Jonathan N. Little on 02/24/07 22:28

Jukka K. Korpela wrote:
> Scripsit Jonathan N. Little:
>
>> Jukka K. Korpela wrote:
>>> 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.
>>
>> That's because MS will *never* let you get rid of the damn border on
>> HRs!
>
> I'd rather say that MS does not let you remove the _content_ of <hr>.
>
> Try this on on IE 7:
>
> hr { height: 0px;
> color: blue;
> background: red;
> border: green 0px none; }
>
> You'll see a blue 1px horizontal line. It seems that you cannot remove
> it without removing the <hr> as a whole (display: none), but you can set
> its color and height (though you can't make the height zero).
>


Funky! Why make no sense is why it should blue (foreground color) where
there is no text! Set the height > 0 and Firefox will correcly show the
background-color red, but not Old IE!

For fun try:
hr { height: 25px; border: 5px dotted green; }

In IE see the mysterious hairline border *inside* the real border? Make
doing something like this very frustrating.

hr { height: 25px; border: 0; background-image: url(fancy.gif); }



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]