Question

We have a hr line and there is a weird black pixel underneath it.

Screenshot: http://i52.tinypic.com/2vwxy78.jpg

Our code:

HTML:

<hr />

CSS:

hr {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #AAAAAA;
    clear: both;
    height: 0;
    margin: 12px 0 18px;
}

Browser:
Firefox

Why is this pixel appearing underneath the <hr />? How do we fix this?

Answer 1

You need to reset all the border properties for the <hr>. Particularly the left border in your case. So:

border: 0;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #AAAAAA;
....

Check it out – http://jsfiddle.net/uwed3/