Horizontal Line

From CSS Discuss

Styling the Html Element HR is problematic; the principal problems being:

• how to color it
• how to replace the default line with an image
• how to specify the thickness of it

...and of course, all this while guaranteeing reasonable results cross-browser! Unfortunately I can't find the characters to make the text strike-through!

I tried to find how to do this myself not long ago, I didn't manage to get to anywhere; So I had a play myself:-

 
hr {
  border: none;
  background-color: #B4CBDF;
  color: #B4CBDF;
  height: 1px;
}

I got this to work at least across IE5-6/Win2K and Moz/Win2K (nearly the same as above, with a different border treatment):

hr {
  border:0;
  border-top: 1px solid #E19832;
  height: 0;
  background: #E19832;
}

- Bob Sawyer

Here are some other links you can try which explain what to do for image display in a horizontal rule, as well:

Here, at Craig Saila's page: http://www.saila.com/usage/tips/defn.shtml?hr and here at Marek Prokop's page: http://www.sovavsiti.cz/css/hr.html

I have been having problems with HRs and IE, it appears to not marginCollapse around HRs for some reason, does anyone know any more about this, I have found nothing mentioning it anywhere? -- Paul James > There is a (french) discussion about this problem here and a solution : http://forum.alsacreations.com/topic.php?fid=4&tid=493 -- Raphael Goetter

I think the extra/non-collapsing "margins" are because IE wants to treat an HR like an inline tag and it won't let you get rid of the line-height. If you set the HR tag to display: block then it is possible to deal with the extra margins/line-height (at least in IE 7). I have used negative margins to remove the extra 7px on top and bottom, but I'd imagine other ways, like perhaps line-height:0, would work. -- Brian Latimer

I think HR margins only work consistently in Opera. One way you could get around this is to enclose the HR in a DIV. Hide the HR and style the DIV. This relies on a junk element, though. -- James Craig

Example:

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

div.hr { /* styles */ }
div.hr hr { display: none; }

Alignment of Horizontal rules

To replace the align attribute for the hr element (deprecated in HTML 4.0 upwards), remember that it is a block element. Hence

hr {margin-left: 0;
    margin-right:auto;
    width: 60%}

will produce a left-aligned rule 60% of the width of the parent element. If width is not defined it defaults to 100% in most browsers. For MSIE it is necessary to add text-align:center due to the bug in centering block elements.

Image in HR

You can use HR's background to replace it with image:

hr {
 border: 0; height: 10px; margin: 0 auto;
 background: url(hr.png) 50% no-repeat;
}

but it won't work in IE. You can serve downgraded version to IE users using Star Html Hack:

* html hr {height: 3px; color: blue;}

---