Posted by Jukka K. Korpela on 02/25/07 13:06

Scripsit Jonathan N. Little:

> Funky! Why make no sense is why it should blue (foreground color)
> where there is no text!

That would indeed seem odd, since the color property in CSS sets the
(foreground) color of the "text content" of an element. But IE apparently
thinks that the <hr> element has implied colorable content (the horizontal
rule), even though there is no content in it in HTML. This makes perfect
sense up to a point, since in SGML, "empty elements" were not really meant
to be "really empty" but have content that comes from an external source
(external to a marked-up text document); cf. to
http://www.cs.tut.fi/~jkorpela/html/empty.html#sgml

However, sensibility ends when the color property is applied to implied
content that is not text at all. Moreover, IE doesn't do this consistently.
If you set the color of an img element, it will not turn affect the colors
in the image. (It doesn, however, quite correctly affect the alt text when
that text appears instead of the image.)

> For fun try:
> hr { height: 25px; border: 5px dotted green; }
>
> In IE see the mysterious hairline border *inside* the real border?

Indeed. It's like a 1px thin inset border inside the real border (use
zooming to see it clearer). Setting the content color removes the mysterious
border.

> Make doing something like this very frustrating.
>
> hr { height: 25px; border: 0; background-image: url(fancy.gif); }

Due to the IE problem, it's perhaps better to use
<div class="hr"><hr></div>
with
.hr { height: 25px; border: 0; background-image: url(fancy.gif); }
hr { display: none; }

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

[Back to original message]