HR Image Replacement

CSS 6 March 2008 | 35 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]
/* ——- EMBEDDED ——- */

[/css]
[css]
/* —– STYLESHEET —– */

hr{
background:url(short-rule.gif) repeat-x top left;
border: 0;
}
#secondary-content hr{
background:url(med-rule.gif) no-repeat top center;
border: 0;
}
[/css]

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.

Be Sociable, Share!

35 Responses on “HR Image Replacement”

  1. Those stinkin’ front end developers. Who can trust them? 😀

    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

  16. nayan says:

    Great, thanks a lot

  17. Greetings, There’s no doubt that your site could be
    having browser compatibility problems. Whenever I look at your blog in Safari, it looks
    fine however, when opening in I.E., it’s got some overlapping issues.
    I just wanted to give you a quick heads up! Other than that,
    wonderful blog!

  18. Tom says:

    Great, thank you!

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. […]