Example 1

Width = 50% Color green Height = 10px

---

Color does not show in Firefox, but height and width do.

Example 2

Width 60%, color red, Height = 15px

---

Example 3

Width 100%, color black Height = 20px

---

Have to add background-color:somecolor, to get the color to show in Firefox.

the above always validates.

What I see

FireFox 1.0	IE 6

Using Border

use border shorthand of {border: red thick ridge}
produces valid html but invalid css, (parse error).

---

It will show in IE6

Using Inline Style

use
hr color="purple" background-color="purple" height="30px" width="25%"
produces invalid html (no attribute color height width) but valid css, HUH(?)

But strangely, both firefox and ie6 look the same, neither shows the height, but both show color and width.
The second line in these screenshots
Go Figure

FireFox 1.0	IE 6

You will have to view the source and remove comments to see all the results I have talked about. I have commented out not valid stuff.

Kitchen Sink

use Inline
color="green"
height="30px"
width="60%"
border-width:30px;
background-color:green;

CSS validates, but HTML does not (no attributes such as these)

Both FF and IE show the same, as in the faint green line at the bottom of these images.

If you remove the comments around the hr in the source, you will see the green line just above this paragraph.

FireFox 1.0	IE 6

Kitchen Sink as div properties

div_id hr {
color:green;
height:30px;
width:60%;
background-color:green;
}

---

HTML validates

CSS validates

back to where we were. Only way to have valid colored hr show the same in FireFox and IE6, with a strict html 4 document is to wrap it in a styled div?

Style as Class on HR

hr.blue50line
{
color: blue;
height: 3em;
width: 50%;
}

Line is called as hr class="blue50line"

Suggestion from authoring.stylesheets - no0bodyhome

Validates as Well. Thank you.

---