If you have ever wanted to style a horizontal rule but had unexpected results, then read on…

The more I learn about clean xhtml coding, the more I want to learn to style the elements within the xhtml instead of adding unneeded page elements. I recently did a site that I wanted to stylize a <code><hr /></code>, but had a hard time finding one that was truly cross browser with consistent result. This does require a small bit of extra code, but it’s a small price to pay for getting something with high compatability.

XHTML:


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


CSS:


div.hr {
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;
}
div.hr hr {
display: none;
}


Tip was found at www.sovavsiti.cz/css/hr.html