Search code examples
cssinternet-explorer-6

make <hr> tag invisible in IE6?

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.

Solution

  • 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;
}