Fancy HRs
Last Update: 3.29.2008
Suppose you've got a lovely little graphic that you'd like to use for a header rule (more commonly known as an HR) in place of the boring old default straight line in most browsers. How do you implement your new graphic in a consistent and semantic method?
It's relatively simple to use CSS to style your HR in most browsers, including IE7:
<style type="text/css">
hr.fancy
{ background: transparent url(images/hr.gif) center center no-repeat;
height: 21px;
margin-top: 2em;
margin-bottom: 2em;
}
</style>
Then, simply add a class of "fancy" to the HRs that should have the special styling:
<hr class="fancy">
Here are the results:
Let us also speak of the 800 pound gorrila in the room. Both Internet Explorer 6 and IE 7, fail to render the CSS for the HR properly. You will need to add the following dandy patch by Borgar, which I've encased in conditional comments.
<!--[if lte IE 7]>
hr.fancy
{ display: list-item;
list-style: url(images/hr.gif) inside;
filter: alpha(opacity=0);
width: 0;
}
</style>
<![endif]-->