sliding door Button element broke in Firefox only

Question

I'm trying to do a sliding door button that can be used in general purpose everything works fine except the Firefox. the span element in button always lower 2px in FF.

here is example

http://jsbin.com/orami3/4

Answer 1

Try this:

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

(Mind that the colon (:) is doubled, yes.)

The extra padding in this case is caused by an obscure Firefox bug.

(Having encountered this bug myself I've found the solution at this blog, via a Google search.)

Answer 2

Well, I don't know why this happens, but there is some strangeness here. It affects Safari as well, and it's slightly different. If you add a negative margin to the button span, it will move half the distance in Firefox than it does in Safari. So, the solution seems to offset the background-image. Here is one way to hack it:

/*grey button hacks non-IE*/
button.grey span{
  background-position: 0 -1px;
}
button.grey:hover span{
  background-position: 0 -36px;      
}
button.grey:active span{
   background-position: 0 -71px;      
}

/* IE workaround.  The \9 makes non-IE ignore these styles*/
button.grey span{
  background-position: 0 0px\9;
}
button.grey:hover span{
  background-position: 0 -35px\9;      
}
button.grey:active span{
   background-position: 0 -70px\9;      
}

Example here: http://jsbin.com/orami3/9