IE7 BUTTON white outline

Question

Does anyone know why IE6 and IE7 add a white border between a button border and the background?

Here is my CSS and HTML:

#reportButton{
    background:#fefcda url(buttonback.png) repeat-x bottom left;
    border-top:2px solid #fffff8;
    border-right:2px solid #e3b40c;
    border-bottom:2px solid #e3b40c;
    border-left:2px solid #fffff8;
    color: #373535;
    font-weight: bold;
    margin:0 2%;
    width:45%;
}

<button id="reportButton">Report a Concern</button>

If you try this, you will see a funny white border between the borders and the background. This does not appear in any other browser, not even IE8.

Anyone have a simple fix or suggestion as to what I'm doing wrong?

Thanks!

EDIT: I just noticed that when I click on the button, the marching ants come up and the white border disappears. It seems as though when the button is :active they disappear, although this doesn't help me much in terms of solving the problem, maybe it will for someone else.

Also, sorry I cannot provide a screen; I have no place to upload it now via this internet connection.

EDIT2: It actually appears that the border is not white but the background-color of the button. It appears IE is leaving a 1px gap between the button border and the button background image.

Answer 1

Poor CSS support.

Answer 2

Make sure that that border is not coming from the image itself (background of the image), set the accurate width and height, also try setting the padding to 0 like @SLaks said.

Answer 3

Appears to be no CSS-only solutions.

Thanks everyone.