RE: Horizontal rules

I have looked into this in some detail.

Mozilla treats the HR as a block box, so 'background-color' sets the
color of the space inside the HR, and the 'border' properties work.
NOSHADE can be treated as

  background-color: whatever;
  border-style: none;

The 'height', 'width', and 'margin' properties all work as expected.
You can even set a 'background-image' on an HR if you want.  Alignment
is not quite so easy; to center the HR you must:

  width: 75%;
  margin-left: auto;
  margin-right: auto;

I think Mozilla's behavior is reasonable, and your arguments to the
contrary aren't all that solid.  The fact that HR { height: } behaves
a bit differently from <HR size=""> is a complete snooze of a non-issue.

[When CSS is not used, Mozilla and Navigator draw
<hr size="10" noshade> with cheesy rounded corners.  Ugh.]


Internet Explorer treats the HR as a different 'display' type, not
as a block.  The HR display type (I don't know if it has a name, that
is, whether maybe you could use that display type in XML) makes odd
uses of some CSS properties.  'color', not 'background-color', sets
the color inside the box, and 'height' is the height of the BR
including the borders (normally in CSS, the 'height' does not include 
borders.)  'text-align' positions the HR horizontally within the
available space.

This is sort of intuitive, unless you're a CSS expert, in which case
it is quite confusing.  :)

Also, there appears to be a bug in IE where the 'color' is painted
over a rectangle that is slightly too large, covering up some of the
border of the HR.

> Having shown that these implementations is wrong, I would 
> suggest that HR
> {border-top: <width> groove} is the best possible implementation.

That's fine, but the CSS2 suggestion is closer to what pre-CSS
browsers do, and (to my eye) more aesthetically pleasing.  Regardless
of what the HTML spec suggests.

-- 
Jason Orendorff

Received on Monday, 31 January 2000 11:14:47 UTC