title: IE7 BUTTON white outline
body: <p>Does anyone know why IE6 and IE7 add a white border between a <code>button</code> border and the background?</p>
  
  <p>Here is my CSS and HTML:</p>
  
  <pre><code>#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%;
  }
  
  &lt;button id="reportButton"&gt;Report a Concern&lt;/button&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Anyone have a simple fix or suggestion as to what I'm doing wrong?</p>
  
  <p>Thanks!</p>
  
  <p>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 <code>:active</code> they disappear, although this doesn't help me much in terms of solving the problem, maybe it will for someone else.</p>
  
  <p>Also, sorry I cannot provide a screen; I have no place to upload it now via this internet connection.</p>
  
  <p>EDIT2: It actually appears that the border is not white but the <code>background-color</code> of the button. It appears IE is leaving a 1px gap between the button border and the button background image.</p>