If you have ever wanted to style a horizontal rule but had unexpected results, 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 unnecessary page elements. I recently worked on a site where I wanted to stylize a <code><hr /></code>. I had a hard time finding one that was truly cross browser with consistent results. This requires a bit of extra code, but it’s a small price to pay for getting something with high compatibility.
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
