If a design calls for a graphical horizontal rule, often front end developers will stick in an img tag and call it a day. However, an hr tag would be more semantic - and, most rich text editors for content management systems have a button for the horizontal rule.

These styles allow cross-browser image replacement for horizontal rule. In my implementation, the IE rules needed to be embedded, but it may have simply been a style overriding elsewhere in the stylesheet. Try it in a conditional commented stylesheet first.

The modern method uses background-image to replace the hr, which is defined normally by border. IE works some wonky stuff with list-item and you may have to scoot things around to get it to work just so, but it works!

PLAIN TEXT
CSS:
  1. /* ------- EMBEDDED ------- */
  2. <!--[if IE]>
  3. <style type="text/css">
  4. #primary-content  hr {
  5.     display : list-item;
  6.     list-style : url(/assets/images/wide-rule.gif) inside;
  7.     filter : alpha(opacity=0);
  8.     margin-left: -10px;
  9.     width : 0;
  10.   }
  11. #secondary-content hr{
  12.     display : list-item;
  13.     list-style : url(/assets/images/med-rule.gif) inside;
  14.     filter : alpha(opacity=0);
  15.     margin-left: 0px;
  16.     width : 0;
  17. }
  18. </style>
  19. <![endif]-->

PLAIN TEXT
CSS:
  1. /* ----- STYLESHEET ----- */
  2.  
  3. hr{
  4.       background:url(short-rule.gif) repeat-x top left;
  5.       border: 0;
  6. }
  7. #secondary-content hr{
  8.       background:url(med-rule.gif) no-repeat top center;
  9.       border: 0;
  10. }

Where can I get HR image assets?

Graphic River: Layered Photoshop, Vector Graphics, Logos and More
Josiah notes in his comment that he has provided some free images at Siah Design. Leave a comment if you would like to be included in this list.

Popularity: 100% [?]

Share and Enjoy:
  • del.icio.us
  • Digg
  • Reddit
  • TwitThis
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • E-mail this story to a friend!
  • Print this article!