HR Image Replacement

CSS 6 March 2008 | 31 Comments

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!

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

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.

Share and Enjoy:
  • del.icio.us
  • Digg
  • Twitter
  • Google Bookmarks
  • StumbleUpon
  • Facebook
  • email
  • Print

31 Responses on “HR Image Replacement”

  1. Those stinkin' front end developers. Who can trust them? :-D

    Very cool. Good to keep in mind. Thx.

  2. Aaron says:

    I have tried the code and in firefox works great but in IE 7 it does not repeat the image background.

  3. Beyonce says:

    CSS "Cascading Style Sheets" Lessons
    css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm

  4. Josiah Jost says:

    Great article Neatly Sliced. For some free horizontal ruler replacement images, you can visit:
    http://siahdesign.com/?p=210

  5. sdpetersen says:

    Wow, Awesome! I've been looking for this solution for weeks and I just wasn't getting it myself. This solution worked wonders for me in all browsers I test (FF, IE6, IE7, Safari, Chrome).

  6. Thanks, that's really helpful - saved me a lot of time and effort. Very handy for CMSs like you say.

  7. alexa says:

    always seem to keep comin back here to read, think this calls for a bookmark. thanks much

  8. Thanks for the simple solution. I've been fighting with IE7 all weeek!

  9. Jennifer says:

    You're welcome - I know I was elated when I discovered it as well!

  10. I am wondering generate income might be notified whenever a wall stickers post has been made.

  11. Frederik says:

    great article, thx :-)

  12. Todd says:

    Yay! Thank you!

  13. della moda insieme alla versione completa del progetto di tipo, riempiendo l . a . semplice elizabeth everyday, every mostrare l . a . postura grazioso.

  14. At this time it sounds like Drupal is the preferred
    blogging platform available right now. (from what I've read) Is that what
    you're using on your blog?

Trackbacks/Pingbacks

  1. HR Image Replacement › Neatly Sliced

    HR Image Replacement › Neatly Sliced

  2. [...] HR Image Replacement (tags: css) [...]

  3. [...] HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser. [...]

  4. [...] HR Image Replacement with CSS- 如何使用一张图片来替换HR标签且兼容各大主流浏览器. [...]

  5. [...] HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser. [...]

  6. [...] HR Image Replacement with CSS- How to change the HR attach with an ikon that entireness interbreed browser. [...]

  7. [...] For instruction on how to change the CSS for the <hr /> to have an image, please visit this link: HR-Image-Replacement [...]

  8. [...] HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser. [...]

  9. [...] ganze Element via Alpha-Filter unsichtbar machen. Liegt ja auch ganz nahe, sowas. Respekt an den Autoren dieses Hacks, dessen Blogpost ich googlen zu einem ganz anderen Thema gefunden [...]

  10. [...] and lower live up to reputation by adding a border around the image regardless, but this can often be worked around. Alternatively you can just hide it via an IE7-and-lower stylesheet. Use a CSS border or background [...]

  11. [...] HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser. [...]

  12. [...] HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser. [...]

  13. [...] and lower live up to reputation by adding a border around the image regardless, but this can often be worked around. Alternatively you can just hide it via an IE7-and-lower stylesheet. Use a CSS border or background [...]

  14. [...] you want to replace that HR with a background image? Good idea. Check out this post at Neatly Sliced for the answer, and gird your loins for the usual IE kludgeries. Posted in Web Development Tagged as [...]

  15. [...] HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser. [...]

  16. [...] HR Image Replacement with CSS- How to replace the HR tag with an image that works cross browser. [...]

Leave a Reply