hr has a black pixel underneath it?

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: 1开发者_如何学JAVApx 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?

---

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/

---

You haven't removed the default style on the <hr> element.

Add this to your CSS:

border-left: 0;

And you should be fixed.