Hello,

I'm newer to CSS, I've used it for all sorts of things, but I am now commiting myself to making fully CSS designed pages. I've done pretty well so far, but I have one last hurdle to get over and it's driving me nuts.

Specifically I want an <hr> between two <p>'s. It's simple, I want it 90% width, centered, and 1px in height. I have this code for it:

Code:
#preamble hr
{
	color: #7a7a7a;
	background-color: #7a7a7a;
	width: 90%;
	border: none;
	height: 1px;
}
This works just fine except for two problems.

1. IE and Firefox don't agree on how hr's are seen when it concerns margins. IE seems to count the margin in, and FireFox seems to completely ignore it. In my particular case I have the <p> above and below the <hr> set with margin: 5 0 5 0; which should make them have 5 pixels away from the <hr>. In IE it's working, in FireFox it's not.

2. My second problem is that FireFox for whatever reason keeps aligning the <hr>'s to the left. Even if I put in text-align: center; into the parent of what's holding the <hr> it will align it to the left.

So because of the above two problems <hr>'s were not working for me. So I attempted to make a <div> into an <hr>, which just seems lame, because an <hr> should do exactly what I want it to.

I'm using this code:

Code:
#div-hr
{
	width: 90%;
	font-size: 0px;
	border-top: 1px solid #7a7a7a;
}
This looks about right, and I get rid of my problem above with margins. However, again I have a problem. In FireFox it won't center! It keeps aligning to the left again.

Am I going to be forced to use a 1px image? I was really hoping CSS could get me past using stuff like this. Am I doing something wrong elsewhere? All in all I'm getting really frustrated with such a simple thing, hehe.

Any help would be greatly appreciated.