HR Image Replacement

CSS 6 March 2008 | 32 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

32 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. Thanks, that's really helpful - saved me a lot of time and effort. Very handy for CMSs like you say.

  15. Nice article, tnx for the read in this site
    check this domain http://blahc-blahc.net

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