Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

CSS - Fancy HRs (with IE6 and IE7 Solution)

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]-->

Looking for more?

Back to Pew Pew Laser Articles

Contact Me