On Apr 8, 2008, at 6:16 AM, Alan K Baker wrote:
> Depending on the browser, there are different methods needed to
> address the actual color of horizontal line in <hr>. My test results
> are below:
>
> hr {
> background-color:#d00; /* Firefox */ Implies that the 'line'
> is entirely constructed of padding and transparent space is 'margin'.
> color:#d00; /* IE 6 & 7 */ Implies that the
> line is classed as text, the element cannot have padding because
> background-color does nothing, and its transparent space is 'margin' .
> border-color:#d00; /* Opera & Safari */ Implies that the line is
> classed as a border, the element cannot have padding because
> background-color does nothing, and its transparent space is 'margin' .
> margin:0;
> padding:0;
> }
>
> If one of these methods is the de-facto standard, then <hr> must be
> classed as a special case, where some rules of block styling do not
> apply, or at least one of the browsers is breaking the rules.
And browsers have bugs...
The colour you see on an <hr> is actually the border of the element.
Now, in theory, the colour of the border is determined by the 'color'
of an element, unless specified by the border-color property [1]. That
works correctly for most elements in all browsers. The <hr> is a
problem child, not because it is a special element, but due to browser
bugs.
* Opera 9.5b, Gecko 1.9 (Fx 3b5), IE 6+ all apply the colour specified
by the color property for the element
* WebKit (Safari 3.1), Opera 9.2x don't apply (inherit) the 'color'
property correctly for the <hr> The author need to specify the border-
color property (and border-style) [2].
Applying the border-colour property also works correctly in Gecko 1.9,
and Gecko 1.8 (Fx2); not sure about IE.
* Gecko 1.8: the background-color property determines the colour of
the <hr>, unless specified as 'border-color'.
In all browsers, except IE 6 and 7, one can also use the background-
color property (will fill the space between borders), padding ( i.e.
makes the element taller), margin, width, height, ...
[1] <http://www.w3.org/TR/CSS21/box.html#propdef-border-color>
[2] for a thin <hr> (1px tall or similar), you should specify the
border-style (as 'solid'), as the default style in mst browsers is
inset.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
