CSS2: Horizontal Rule Has 1px Border in IE?

[kwilliams]

I'm having a problem yet again with how CSS2 is rendered in IE. This time, I'm trying to create a customized horizontal rule. It works great in Firefox, but not in IE. It shows up with some sort of border/indentation in IE, even thought the border is set to 0px. I've created a test page at http://www.douglas-county.com/testhr.asp that shows exactly what I'm seeing in IE.If anyone knows whether or not there is a solution to this, I'd really appreciate hearing it. Thanks for any help.

[kwilliams]

P.S. I've now actually added the CSS to the page with an actual horizontal rule. I had just intended for people to see what I was seeing, but now I understand that you can't help without all of the information. Thought that I'd beat you to the punch:)

[yoshida]

Have you tried border:none;? I'm not sure but I believe I read about it somewhere.

[kwilliams]

Ok, I received the solution from another forum. You can see the thread at http://www.webdeveloper.com/forum/showthre...9466#post559466. This is the solution:

ok the trick is to set color and background to the same color to make it look the same in IE and FFCode:hr { border: 0; width: 99.6%; color: #660000; background-color: #660000; height: 6px; }

And it now works, as you can see on the test page. Thanks to everyone for their help:)

[yoshida]

Great, hide the border instead of disposing of it.

[aspnetguy]

yup you have to add height for IE since IE only knows CSS1 not CSS2

[Jonas]

Styling HRHorizontal Rules and CSS