Horizontal Rules (Was: Re: Various Niggling CSS1 Questions)

I just spent quite some time studying the intricacies of styling HRs in
MSIE4.0p1 and Netscape4.03 for Macs.

In the CSS1 Recommendation [1], the example default HTML2.0 stylesheet
gives the following declarations for HR:

H1, H2, ..., HR { display: block }
HR { border-top: solid }

Since no colour is defined for the border, it takes the value of the
'color' property for the element.  In the example stylesheet, this is
'black', inherited from the declaration for BODY.  The size (height) of the
line is the default value for the border-width, which is 'medium'.

In fact, by default browsers have usually rendered HR more-or-less as if
the declaration was:

HR { border-top: thin groove transparent }

Note that due to the transparent border-color, the background colour of the
page alters the actual colour of the line.

Now for the fun and games: my goal was to try to make the horizontal lines
green, with the same 'groove' look, rather than the 'solid' one, on both
Netscape and IE.

Let me deal with IE first.  In IE, a horizontal rule is not treated as a
border, it is treated as if it is text.  To change its colour, you can use
the 'color' property, so, as I want green lines, I can use:

HR { color: #006600 }

The problem is that this gives me a not-very-thin *solid* line, but I still
want the groove.  So what about changing the background colour, and letting
it shine through a transparent line?

HR { background-color: #006600 }

[ Note: if color is already set on BODY, it's inherited even if you set
'color: transparent', which should work.  Mind you, it's a step up from
Netscape where 'transparent' is taken as 'black' whatever.  This is the
problem that Eric A. Meyer's running into. ]

What this does is give me a green groove, but the background spreads for a
line or so above and below the rule and nothing I can find (padding,
margin, line-height, height) will change that.

So the main problem with MSIE4.0p1 for Mac's implementation (which may not
hold true for other platforms) is that the horizontal line is treated as
*text*, which means that you can't have the flexibility that you would have
if it was treated as a *border* (such as making it a double-line, dashed
line or groove).

Onto Netscape, which is where the fun really starts.  I don't know how to
describe how Netscape treats HRs, but they're neither text *nor* a border.
Using this styling:

HR {
 width: 100%
 border-width: thin none none;
 border-style: groove;
 border-color: #006600;
 }

[ Note that Netscape doesn't support the border-top property, which is why
I have to do it this way. ]

The rendering from a *single* HR looks like 2 horizontal rules, the upper
one looking like a normal rule while the lower one is in green.  Using the
declaration:

HR { width: 100%; border: thin groove #006600 }

shows the reason.  In ASCII:

----------------------------
+--------------------------+
|                          |
+--------------------------+

Somehow the area in Netscape assigned to horizontal rules appears *below*
the horizontal rule itself.

[ Other notes of interest: I also managed to crash Netscape using the
declarations:
  HR {
   clear: both;
   width: 100%;
   background-color: #99FF99;
   border-width: thin none none;
   }
and Netscape puts a lot more room above and below horizontal rules if you
declare:
  HR { display: block; } ]

At 22:26 +0100 24/9/97, Steve Knoblock wrote:
>hr {
>   background: #CCCC99;
>   color: #CCCC99;
>   height: 1px;
>   width: 100%;
>}
>
>This is the code I'm using now and it works in IE4.0 PP2.

With MSIE4.0p1 for Macs, this gives a thick (like 12px) beige line.  In
Netscape4.03 for Macs, it doesn't effect the look of the horizontal rule at
all.

My conclusion from all this is that to have coloured horizontal rules that
don't look dreadful on Macs, you should use the declarations:

HR {
 color: <colour>;
 border-top: <width> <style> <colour>;
 }

and whatever other declarations you want.  e.g. for me:

HR {
 width: 100%;
 clear: both;
 color: #006600;
 border-top: thin groove #006600;
 }

With MSIE4.0p1 for Macs, the lies will be around 2px deep, solid, and the
colour you want.  With Netscape 4.03 for Macs, they'll look just like
normal, but maybe by the time border-top *is* supported by Netscape, it'll
also handle HRs less idiosyncratically.

The real question now is how horizontal rules look with these declarations
with other browsers on other platforms.  I'll be grateful to anyone who
lets me know.

Cheers,

Jeni

[1] http://www.w3.org/pub/WWW/TR/REC-CSS1-961217


Jeni Tennison
Department of Psychology, University of Nottingham
University Park, Nottingham NG7 2RD, UK
tel: +44 (0) 115 951 5151 x8352
fax: +44 (0) 115 951 5361
url: http://www.psychology.nottingham.ac.uk/staff/Jenifer.Tennison/

Received on Thursday, 25 September 1997 06:53:52 UTC