Question

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.

Here’s the CSS and the image.. Any ideas? Thank you!

.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;
}

!Sprite Image1

Answer 1

If FF4 add:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

If older FF add:

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

somewhere to the begining of your .css file. Firefox has it’s own forms.css – you need to wipe out the user agent styles.