Chris J Allen Chris J Allen - 6 months ago 9
HTML Question

Styling horizontal rules

Is there a nicer way of styling a

<hr />
tag using CSS, that is cross-browser consistent and doesn't involve wrapping a
div
around it? I'm struggling to find one.

The best way I have found, is as follows:

CSS

.hr {
height:20px;
background: #fff url(nice-image.gif) no-repeat scroll center;
}
hr {
display:none;
}


HTML

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

Answer

The classic way of doing this is creating a wrapper around the <hr> and styling that. But I have come up a CSS trick for image replacing the element without the need for extra markup:

For non MSIE browsers:

hr {
   border : 0;
   height : 15px;
   background : url(hr.gif) 0 0 no-repeat;
   margin : 1em 0;
 }

Additionally for MSIE:

hr {
   display : list-item;
   list-style : url(hr.gif) inside;
   filter : alpha(opacity=0);
   width : 0;
}

See entry on my blog for further info and an example of the trick in action.

Comments