Hr Tag in IE - remove border

Question

In other browsers except IE7 and lower the hr displays a border around the hr tag which I don't want it to.

<!--[if lte IE 7]>
<style type="text/css">
hr {
    margin: -3px 0 0 0;
    padding: 0;
    height: 19px;
    border: none;
    outline: none;
    background: url("img/split.png") center no-repeat;
}
</style>
<![endif]-->

I've tried this solution, but it still appears to have a border around it.

It looks like this:

How do I get rid of it?

Answer 1

See http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

It seems that there is no good way around this problem, only with a hack (using a surrounding div).

Answer 2

To avoid these problems, you could use DIV tags instead. In order to make it accessible, put an HR inside like this:

<div class="ruler"><hr /></div>

then apply styles to it:

.ruler { border-top: 1px solid black; }

.ruler hr { display: none; }

This will hide the HR and make the DIV a "horizontal ruler".