<HR /> Image-Replacement Through CSS

Written January 14. 2007, at 00:37 GMT.

My evil-genius friend and work-buddy, Borgar, just invented a way to replace HR elements with images using just CSS.

As far as I can tell, his is the first-ever method that accomplishes this across all browsers - without resorting to scripting or adding any extra markup. Pretty neat!

And I'm proud to be able to say that I got to help him rid the method of its initial kinks.

To summarize, here's the finalized version of the IE hack pieced together from the comments following Borgar's blog post:

<!--[if lte IE 7]><style type="text/css">
  hr {
    display : list-item;
    list-style : url(hr.gif) inside;
    filter : alpha(opacity=0);
    width : 0;
  }
</style><![endif]-->

Note, that you'll need to add a margin-bottom property to make IE's margin consistent with that of other browsers.

Note also, that by adding a combination of text-align and margin-left rules, you can achieve any horizontal alignment you like. (IE defaults to "centered".)

...

Discuss and praise over at Borgar's blog.

---

More like this: English Entries, .