- From: E. Stephen Mack <estephen@emf.net>
- Date: Sun, 27 Jul 1997 17:23:34 -0700
- To: www-style@w3.org
David Perrell <davidp@earthlink.net> wrote:
> This _should_ get the rule you want:
> STYLE TYPE="text/css">
> HR.fancy {
> background: transparent;
> border: 0;
> margin: 0;
> border-top: 10px solid blue;
> margin-left: 50%; }
> </STYLE>
I've just tested David's suggested rule-group for horizontal rules.
I'll add screen shots for this and the below background stuff
soon.
Navigator 4.01 gets the correct alignment and left-margin (therefore
getting the right width, 50%), but the rule has no blue border.
Navigator's list of known issues says that border must be applied for
all four sides, not just one side, so I'm not surprised this didn't
work. When I change "border-top" to "border" Navigator puts the border
*after* the rule. Bizarre!
IE 4.0 pp2 bungles David's rule group completely. The horizontal rule
appears full-width, with no border at all. Every property/value is
ignored, particularly margin-left. If Microsoft developers are listening
(are you?), pay attention to margins for PP3, since I think that's
the most problematic part of your current implementation.
IE 3.02 just places an ordinary rule with no blue border, but it is
correctly right-aligned and 50% width.
> By declaring HR block, an author could define some very fancy rules
> with minimal markup using background images and different color
> borders. Provided, of course, height is a valid property.
I like the idea of background images for the rules; hadn't thought of that
before. Finally a replacement for HTML 3.0's lamented
<HR SRC="foo.gif">. But, upon testing, this wonderful idea is
not yet a reality. In a STYLE element I declared:
.green {
height: 10px;
background: green;
color: blue; }
.clouds {
height: 20px;
background: url(clouds.gif); }
In the document, I used:
foo-4 <HR CLASS="green"> foo-5 <HR CLASS="clouds"> foo-6
<P CLASS="clouds">foo-7
<P>foo-8
<P CLASS="green">foo-9
<P>foo-10
No go. This resulted in:
IE 4.0 pp2:
A blue (not green) horizontal rule of 10 pixels appears between foo-4
and foo-5. The next horizontal rule was the correct height (20
pixels), but was transparent: no cloud image.
The text "foo-7" and "foo-9" both have the appropriate background,
extending the full width of the screen.
I'm not sure if the height is supposed to be ignored here (it's
not CSS1 core to change the height of non-replaced elements), but
it is.
IE 3.02:
Very strange. The two horizontal rules appear with two pixels of
height on top of a rectangle of line height that shows the
color and background image. The background color of foo5 and
foo6 distorts the rules' background color.
The "foo-7" and "foo-9" text is only as wide as the text itself,
not the full width of the screen.
Navigator 4:02:
The horizontal rules are absolutely plain, without the specified
height or background. The text "foo-7" and "foo-9" appears
the same as IE 3.02 does it, with the background only behind
the text itself, not full-width.
> The results you are getting are very disheartening, as was a recent
> attempt to use CSS1-defined rules with NSN4.01.
Yup, I'm quite disheartened. (Although I'm very interested
by these incorrect interpretations -- it's like watching a
car wreck.) These partial and conflicting implementations
are very frustrating.
--
E. Stephen Mack <estephen@emf.net> http://www.emf.net/~estephen/
Received on Sunday, 27 July 1997 20:22:27 UTC