Replacing HR elements with images

Yesterday I was presented with the problem of using an image for the HR tag. Quick googling confirmed my suspicion, that this is something a lot of people want to achieve but apparently it can't be done because of, as usual, IE's limitations.

The recommendations seem to be to either wrap the HR in a div and styling that, or just simply work around it by not using images. But of course it can be done, and here's how:

We start with some nice clean code for all the "alternative" browsers:

hr {
  border : 0;
  height : 15px;
  background : url(hr.gif) 0 0 no-repeat;
  margin : 1em 0;
}

This seems to work for all standards compliant modern browsers. I've tested it on Opera, Safari & Firefox. However, it does not work on Explorer. IE treats the element as inline and demands a border around it and a minimum height of 1px.

IE supports very basic generated content with the list-style-image setting when combined with display: list-item. This is what I've used to get around the limitations.

Add this into conditional comments (or hacks if you prefer) to shift the element out of the way and insert a bullet picture in the resulting space:

hr {
  display : list-item;
  list-style : url(hr.gif) inside;
  filter : alpha(opacity=0);
  width : 0;
}

You can view a live example here.

Updated - 16. 1. 2007:

I've updated this entry and the example with the improvements suggested by Már. There are no longer any limitations on this technique.