html - hr has a black pixel underneath it? -

we have hr line , there 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 pixel appearing underneath <hr />? how fix this?

you need reset border properties <hr>. particularly left border in case. so:

border: 0; border-bottom: 1px solid #ffffff; border-top: 1px solid #aaaaaa; .... 

check out - http://jsfiddle.net/uwed3/