hr colors issue

Hi,

The other day I was trying to color HR's and found that they can be coloured in IE but that they show up in the default appearance in FF. Then a moment ago, I found a thread here where a guy has coloured his HR in FF by telling it to be gray, though he had hard coded the style in the html page.

Is it necessary to use the english spelling for color for HR's? why did my hex code not work?

The css I had used was

#menu hr {color : #004040;}

I think that the support for <hr> styling is a little sketchy. I'd go for a div with a border or some kind of background image that's 1px tall.

The css I had used was

#menu hr {color : #004040;}

Try using background-color instead of color.

Gaw, now why didn't I think of that?

Thanks

Bazz

It's much easier to use a DIV - if you keep the real HR as well, you'll have the best of both worlds:

<div class="hr"><hr /></div>

and then

div.hr
{
.. border styles ..
}
div.hr hr
{
display:none;
}

Nice one Brocake. I'll have to keep that one in mind. :thumbsup:

If working over a solid background-color, this works for IE, Firefox, and Opera on PC.

Set the color:; to blend with the containing element's background, and the border to whatever color you'd like the hr:

hr { border:0; border-top:solid 1px #e3e3e3; color:#fff; }

Hmm, good idea both of you, (BC and McD)

I don't readily see the need to color the HR any longer, since BroCakes idea of making it transparent should make it suitable for any use irrespective of background color and therefore allow for C+P more? :)

Bazz