Reading through your responses I found it necessary to set up a small test page to show the effect of specifying different properties for color on the hr element.
http://test.rudolphina.org/hr.html Because of the number of bugs, interpreting the results is a non-trivial task certainly. Some examples: a) IE 6 and IE 7 do show the background-color specified - but if the hr has color specified also, you have to set color: none; to get it. b) Firefox 2.0.0.13 ignores height completely. c) Opera 9.25 does honor the border-color property if specified, but fails to use the color property in its absence. d) margin: 0; does what you would expect in Firefox 2.0.0.13 and Opera 9.25 but not for IE 6 and IE 7, where you have to specify margin: -7px 0; Enjoy finding more bugs. For your reference ("Box model"): http://www.w3.org/TR/CSS21/box.html#border-color-properties I would also be interested to hear about Safari, Fx 3b and IE 8b. Thanks, Manfred On 08/04/2008, Philippe Wittenbergh <[EMAIL PROTECTED]> wrote: > > 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/ > ______________________________________________________________________ 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/
