Question

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 1

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.