title: Sprite sliding doors buttons, extra padding in firefox
body: <p>I'm using the Sliding Doors technique with a sprite image to create span-able buttons, in Firefox, there's some extra padding on the right side, but everything looks perfect in IE and Chrome.</p>
  
  <p>Here's the CSS and the image.. Any ideas?  Thank you!</p>
  
  <pre><code>.button::-moz-focus-inner {
      border: none;  /* overrides extra padding in Firefox */
  }
  
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
      /* Safari and Google Chrome only - fix margins */
      .button span {
          margin-top: -1px;
      }
  }
  
  
  .button { 
      position: relative;
      border: 0; 
      padding: 0;
      cursor: pointer;
      padding: 0 14px 0 0;
      background: transparent url(../img/button.png) no-repeat right -58px; 
  }
  
  .button span {
      padding: 5px 3px 8px 16px;
      background: transparent url(../img/button.png) no-repeat left top; 
      color:#6d6d6d;
      font-size: 12px;
      text-transform: uppercase;
      position: relative;
      display: block; 
      white-space: nowrap;
      text-align: center; 
  
  }
  
  .button:hover, .button.button_hover { 
      background-position: right -87px; 
  }
  
  .button:hover span, .button.button_hover span{
      background-position: 0 -29px;
  }
  </code></pre>
  
  <p>!Sprite Image<a href="http://i.stack.imgur.com/wv2Kz.png" rel="nofollow">1</a></p>