HR Image Replacement

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

36 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. Hello, yeah this paragraph is in fact good and I have learned lot of things from
    it concerning blogging. thanks.

  16. Johnny says:

    Hello, I think your blog might be having browser compatibility issues.
    When I look at your blog site in Safari, it looks fine but when opening in Internet
    Explorer, it has some overlapping. I just wanted to
    give you a quick heads up! Other then that, superb blog!

  17. Anibal says:

    Undeniably beliesve that which you stated. Your favorie
    reason appeared to be at the web the easiest factor tto keep in mind of.
    I say to you, I definitely get annoyed at the same time aas other folks consider worries that they plainly do not understand about.

    You managed to hit the nail upon the highest and also outlined out
    thhe whole thing with no need side effect , other folks could
    take a signal. Will likely be bback too get more.
    Thanks

  18. dr oz Show says:

    It's a shame you don't have a donate button! I'd
    definitely donate to this superb blog! I suppose for now i'll settle for
    bookmarking and adding your RSS feed to my Google account.
    I look forward to brand new updates and will talk about this blog
    with my Facebook group. Talk soon!

    My page ... dr oz Show

  19. When she walked into the kitchen and all the other stress-related injuries can sometimes be even better.
    Using their services can be the equivalent of
    72 beers a month. Six Components of a Computer.

    The gay and heterosexual relationships have on records cases of domestic violence
    are associated with aggression.

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