[html] Horizontal line using HTML/CSS

I am trying to get a horizontal line to work in my blog site, but I am having trouble in displaying the line in google chrome (IE and Firefox display it perfectly).

Basically, in my CSS, I have the following:

div.hr {
background: #fff  no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}

div.hr hr {
display: none;
}

In my HTML, I have something like:

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

For some reason, in google chrome, the line is just not there. The problem now is, I have lots of these (around 25):

---

and therefore, I am looking to modify only my CSS, so that I can make minimal changes to my HTML.

Upon googling, I see that many have had this problem, but there does not seem to be a proper solution (not considering "drawing" a line and inserting the line as a pic!).

I would appreciate if someone could point me in the right direction to solve the above problem.

Many thanks.

you could also do it this way, in my case i use it before and after an h1 (brute force it ehehehe)

.titleImage::before {
content: "--------";
letter-spacing: -3px;
}

.titreImage::after {
content: "--------";
letter-spacing: -3px;
}

If the letter spacing makes it so the line get in the text just use a margin to push it away!

Or change it to height: 0.1em; orso, minimal size of anything displayable is 1px.

The 0.05 em you are using means, get the current font size in pixels of this elements and give me 5% of it. Which for 12 pixels returns 0.6 pixels which is too little to display. if you would turn up the font size of the div to atleast 20pixels it would display fine. I suppose Chrome doesnt round up sizes to be atleast 1pixel where other browsers do.

I have try this my new code and it might be helpful to you, it works perfectly in google chromr

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}