Outline IE7 BUTTON

Question

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

Here are 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. It does not appear in any other browser, even in IE8.

Does anyone have a simple fix or suggestion on what I'm doing wrong?

Thanks!

EDIT: I just noticed that when I click on the button, marching ants appear and the white border disappears. It seems that when the :active button, they disappear, although this does not help me in terms of solving the problem, perhaps it will be for someone else.

Also, sorry, I cannot provide a screen; I have nowhere to download it through this internet connection.

EDIT2: it actually appears that the border is not white, but the background-color button. It looks like IE leaves a 1px gap between the button border and the button background image.

Answer 1

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

eg. to display the 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 this border does not come from the image itself (the background of the image), set the exact width and height , also try setting the padding to 0 , as indicated in @SLaks.