Issue 2: Horizontal Rule properties

In HTML 4.0, the attributes for the HR element are deprecated
in favor of style sheets.  In many places, the HTML 4.0 draft
spec suggests some potential style sheet examples that can be
used instead of the deprecated attributes or elements, but in
this case there is no alternative presented.

I want to see if HTML 4.0's promises regarding the use of style
sheets to replace the deprecated elements and attributes are
possible with current implementations of style sheets.

My goal is to replace the following tag
   <HR SIZE="10" WIDTH="50%" ALIGN="RIGHT" NOSHADE COLOR="BLUE">
with a style sheet.  I realize that NOSHADE is not
deprecated in HTML 4.0 because there is no equivalent
CSS1 property (yet?), and that the COLOR attribute is an
IE-only extension.

The best results were achieved with a head section containing:

<STYLE TYPE="text/css">
HR.fancy { height: 10px; text-align: right; width: 50%; color: blue;
margin-left: 50%; }
</STYLE>

followed by a body of:

foo-0 <HR> foo-1 <HR CLASS="fancy" NOSHADE> 
foo-2 <HR SIZE="10" WIDTH="50%" ALIGN="RIGHT" NOSHADE COLOR="BLUE">
foo-3

IE 4.0 pp2:      The fancy rule is the correct height, color, width, and
                 alignment.  It entirely duplicates the deprecated
                 attributes, making the second and third rules the same.

IE 3.02:         The rule is the correct color, width (more or less,
                 it's off a few pixels), and alignment.
                 It is the incorrect height.

Navigator 4.01:  The rule is the correct width and alignment but it
                 has the incorrect height (default two pixels was
                 used instead) and color.

I tried to see if all three of width: 50%; margin-left: 50% and
text-align: right are required.  They are to various degrees, and
this is what's strange.

Taking out text-align: right; caused IE 4.0pp2 to center the
horizontal rule.

Taking out width: 50%; caused IE 4.0pp2 to display the horizontal
rule at 100% width.  It also caused erroneous display problems
in Navigator: the text "foo-1" suddenly acquired a left margin
of 50%.

Taking out left-margin: 50%; had no effect on IE 4.02, but caused
IE 3.02 to render the rule with full width.  Navigator now
left-aligns the rule instead of right-aligning.  (The text
"foo-1" is still erroneously positioned.)

The description in section 4.1.2 regarding horizontal formatting
took me several readings to comprehend [1].  But given the fact
that "if _none_ of the properties are 'auto', the value of
'margin-right' will be assigned 'auto'", I can understand why
Navigator left-aligns the rule if there is no left-margin value.

But overall, other things seem to be screwy.

It seems from the Space test page [2], that Navigator and IE both
fail at assigning margin-left and margin-right the auto value
(tests 3.1 to 3.3).  IE 4.0 pp2 fails the width value test as
well).

Other Notes:

* Height is not core CSS1, so I can't fault Navigator for not
  changing the height of the horizontal rule.

* Are horizontal rules replaced elements?  They have default
  dimensions and in some ways are similar to replaced elements.

* It is somewhat perverse that IE requires that I use the
  "text-align" property to align an element that is clearly
  not text.  Even using left-margin: 50%; and right-margin: 0;
  doesn't work (although it works for Navigator 4.01).

[1] http://www.w3.org/pub/WWW/TR/REC-CSS1#horizontal-formatting
[2] http://www.w3.org/Style/CSS/Test/space
-- 
E. Stephen Mack <estephen@emf.net>    http://www.emf.net/~estephen/

Received on Sunday, 27 July 1997 04:57:18 UTC