« ColdFusion Checks String Length
CSS Off! Event »
Mar 06

HR Image Replacement

CSS

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. }

This entry was posted on Thursday, March 6th, 2008 at 5:46 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “HR Image Replacement”

  1. Joshua Curtiss Says:
    March 6th, 2008 at 9:37 am

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

    Very cool. Good to keep in mind. Thx.

  2. roScripts - Webmaster resources and websites Says:
    April 7th, 2008 at 7:15 pm

    HR Image Replacement › Neatly Sliced

    HR Image Replacement › Neatly Sliced

  3. Skylog » Blog Archive » links for 2008-04-08 Says:
    April 8th, 2008 at 12:30 am

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

  4. Using CSS to Do Anything: 50+ Creative Examples and Tutorials Says:
    April 21st, 2008 at 8:17 am

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

  5. Aaron Says:
    April 22nd, 2008 at 10:18 am

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

  6. 50多个极富创意的CSS演示和教程 | 帕兰映像 Says:
    April 23rd, 2008 at 3:05 am

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

  7. KMC | Web & Internet Teknolojileri Günlüğü » CSS ile 50′den Fazla Yaratıcı Örnek ve Makale Says:
    April 25th, 2008 at 4:18 am

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

  8. Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design Says:
    May 6th, 2008 at 3:07 am

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

Leave a Reply