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

I had the same problem...neat trick that seems to work at least for IE: The "white" outline is actually the background color of your image. So set this to be the same as your border color. If you don't mind a slightly-thick-ish border, stop there. If the border is now too thick, set your border color to the background color of the page.

e.g. to display a black "border" use this css for your button: background: url(./button_bg.gif) no-repeat; background-color:#000000; border: 1px solid #FFFFFF;

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.