hr with an image through css

Question

I find this a pain. I am trying to get CSS to use an image when the < hr /> tag is used. I am currently using:

hr
{
  display:block;
  border:none;
  height:10px;
  background-image:url('img/ruler.gif');
} 

However, I always get a border around the image. As you can see, the border:none does nothing.

I know there are alternative ways such as using div. But is it possible through using the hr tag only?

The main users will be using IE6, so need a IE6 compatable solution please. Thanks

Answer 1

hr {
    display:block;
    border:0px;
    height:10px;
    background-image:url('img.gif');
}