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;

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.

This question is tagged with html google-chrome css

~ Asked on 2011-09-05 00:33:41

The Best Answer is


This might be your problem:

height: .05em;

Chrome is a bit funky with decimals, so try a fixed-pixel height:

height: 2px;

~ Answered on 2011-09-05 00:43:54


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;

~ Answered on 2013-04-15 11:54:43

Most Viewed Questions: