Jako — Wed, 10 Oct 2007 23:10:38 +0000

Megan,

Did you try the code you supplied in FF and IE?

Another issue is highlighted - both display different outputs. Color is the same as required but now the hr is in 2 different positions and 2 different widths !!!

JeevesBond

Yes, sorry i originally started out using CSS but now am using CSS level2.
But the issue was the same whatever hr style i used.

JeevesBond — Wed, 10 Oct 2007 21:29:59 +0000

I just noticed something in that HTML code:
<hr></hr>
That should be:
<hr />
Horizontal rule is an empty tag.

Megan — Wed, 10 Oct 2007 16:11:56 +0000

Try this:

hr {
	border: none;
	border-top: 1px solid #ccc;
	height: 0;
	width: 75%;
	margin: 5px 0;
	}

Megan — Wed, 10 Oct 2007 15:59:34 +0000

How does margin on an hr play funny tricks in browsers? I'll have to test this out...

Jako — Wed, 10 Oct 2007 15:54:45 +0000

I know border-bottom doesn't do that, but i have in order to leave sufficeient gap form my div tag i would need to use margin to give me the space from the text - which plays funny tricks betwixt browsers doiesn't it?

If i'm wide of the mark please advise. I am still learning..

Megan — Wed, 10 Oct 2007 14:11:01 +0000

Using the border doesn't do that?

Jako — Wed, 10 Oct 2007 13:48:51 +0000

I am trying to comply with CSS level 2 validation.

I think i saw somwhere that someone had used a table but cannot remember where i saw/read it.

What is the best way to add a horizontal rule in a color, rather than a background-color, and keep the CSS level 2 validation and make the rule the same in FF and IE?

Any help appreciated.

Megan — Mon, 08 Oct 2007 15:17:21 +0000

Using a border instead of a background colour is another option. I think I've done that in the past but I can't remember which site it was on...

Jako — Sun, 07 Oct 2007 20:16:16 +0000

Many thanks for the information.

I hold little hope of a universal standard for all browsers when such issues are brought to light.

I appreciate your help dk01 and webwiz.

dk01 — Sun, 07 Oct 2007 20:04:42 +0000

This is a funny actually because defining both background color and color to the same value will throw an warning on the validator (since you would never want color and background to be the same color as no one could read the text). So to get it to work in IE you have to live with the warning. Thank you Microsoft!!!