make <hr> tag invisible in IE6?

Question

Is there a way to get rid of the border on <hr> element in IE6 without a wrapping it in another element? Another requirement is no hacks, unfortunately.

I've managed to do it for all browsers by styling the border as such:

hr.clear {
    clear: both;
    border: 1px solid transparent;
    height: 0px;
}

Yet IE6 still renders a 1-pixel white line.

Answer 1

display: none does not work because you're completely removing the <hr> from element flow. That causes it to stop clearing your floats.

If you're OK with completely hiding it, just use visibility: hidden instead. It will still clear floats, and this works on all IEs:

hr {
    clear: both;
    visibility: hidden;
}

Answer 2

So the problem is that IE does not consider <hr> borders as "borders". If you set

border: 1px #f0f solid; 

... it'll add a fuchsia border around the existing bevelled border. Fortunately, Firefox and IE8 render this the same and realize that border: 0; means I don't want a border. Unfortunately, IE 7 and lower versions don't do this.

So to answer your question... no... there isn't a way to get rid of the border on <hr> element in IE6 without a wrapping it in another element or hacking it (I haven't found a way to do this from my experience).

Your options are either wrap the <hr> in a <div>, if you have a solid background color, set the color property to that of the background color, or use images for the background.

Option 1:

<div style="height:1px; background: transparent;">
    <hr style="display:none;" />
</div>

Option 2:

hr.clear {
    border: 0 none;
    height: 1px;
    color: #ffffff; /* if your bg is white, otherwise choose the right color */
}

Option 3... check this out: http://blog.neatlysliced.com/2008/03/hr-image-replacement/

Sorry that IE (older versions) doesn't play by the rules. I hope this helps.