416277 - Header rule color and style do not change as instructed in CSS.

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[LC MacQueen]

User-Agent:       Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506; InfoPath.2; .NET CLR 3.5.21022)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

I specified in CSS that Header Rule 1 should be red (shade #CC3333), solid. Firefox renders it as solid, but gray, not red.  Oddly enough, Firefox correctly renders my Header Rule 2 as red, but instead of the dotted line I specified, renders it as solid instead! 


Reproducible: Always

Steps to Reproduce:
1. Specify Header Rule style in CSS.
2. .HRule1 {color:#CC3333; height:2px; width:100%; }
3. .HRule2 {background-color:#CC3333; border:2px dotted #CC3333; border-style:none none dotted; width:100%; }
Actual Results:  
I specified in CSS that Header Rule 1 should be red (shade #CC3333), solid. Firefox renders it as a solid gray line.  Oddly enough, Firefox correctly renders my Header Rule 2 as red, but instead of the dotted line I specified, renders it as solid instead!

Expected Results:  
I expected header rules of the style, Header Rule 1, to appear as solid red lines. I expected header rules of the style, Header Rule 2, to appear as dotted red lines. And this is how the header rules DO appear in Internet Explorer.

I think I've described this adequately above.

Comment 1

[Stefan [:stefanh]]

> 2. .HRule1 {color:#CC3333; height:2px; width:100%; }
> 3. .HRule2 {background-color:#CC3333; border:2px dotted #CC3333;
> border-style:none none dotted; width:100%; }

"color" and "background-color" is not the same. Internet Explorer treats "color" as "background-color" when applied to hr elements. If you want your hr to be red in Firefox you have to use "background-color" (as you do in .HRule2).

Comment 2

[Daniel.S]

Yes, Internet Explorer is wrong here. hr is just a block element with no special treatment. -> Invalid.

Reporter, please style your horizontal rules so that they'll work in Firefox. This enables them to be correctly rendered in otehr browsers as well (Opera and Safari for example). It also looks like IE8 is going to style hr elements correctly according to standard.