CODEWITHSUNDEEP
htmlcss
Chris J Allen
Chris J Allen

Reputation: 19207

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>

Upvotes: 4

Views: 655

Answers (3)

Borgar
Borgar

Reputation: 38652

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.

Upvotes: 7

Ian Oxley
Ian Oxley

Reputation: 11056

You could apply the background image to the bottom of the preceding element, perhaps with a bit of extra padding. That way you can get rid of any surplus / non-semantic markup.

Upvotes: 1

vfilby
vfilby

Reputation: 10008

If you set display to block it should behave more like a <div>.

Your answer you should remove hr altogether and just use the div

Upvotes: 1

Related Questions