Submit button CSS problems - html

Question

I am using some css styling for my submit buttons, and they look fine except in Firefox there is a space between the left and main image. Here is what I'm using:
button.buttons {
background: none;
background-image: url(images/button_left_sprite.png);
display: block;
border: none;
margin: 0 10px 10px 0;
padding: 0 0 0 17px;
cursor: pointer;
font-weight:normal!important;
color: #111111;
}
button:hover.buttons {border: none; }
button.buttons span {
background-image: url(images/button_sprite.png);
padding: 9px 20px 10px 5px;
font: 12px 'Droid Sans',arial,sans-serif;
}
/* Green Button */
button.btn_green {background-position: 0 569px;color: #435425;}
button.btn_green:hover {color: #435425!important;}
button.btn_green span { background-position: 100% 569px;}
button:hover.btn_green { background-position: 0 528px;background-color:transparent!important; }
button:hover.btn_green span { background-position: 100% 528px;background-color:transparent!important; }​
And to put it on the page:
<button type="submit" class="buttons btn_green left"><span class="left">Update</span></button>​
If it helps, the images are here:
Im going bonkers trying to get this ugly space to go away in Firefox! Can anyone help me figure out why it's doing this?

Answer 1

Firefox has some abnormalities when it comes to button/input padding. I'm not sure why it is the case, and why the issue remains despite being publicly documented. Anyway, check out something like normalize.css and check out the section on forms - for instance, this is one fix they apply for firefox:
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Being that your left sprite depends on 17px of left padding on .buttons, if FF adds a couple pixels by default, that could mess with your images aligning. Another thing you could try is reducing the amount of left padding and see if the images line up.
Does that help?

Answer 2

Is it only for me that the button looks totally messed up in firefox? not just a space between the images.
Looks better for me like that:
http://jsfiddle.net/78eSc/1/
button.buttons {
background: none;
background-image: url('http://i41.tinypic.com/dv1b6.png');
display: block;
border: none;
margin: 0 10px 10px 0;
padding: 0 0 0 14px;
cursor: pointer;
font-weight:normal!important;
color: #111111;
}
button.buttons span {
display:block;
background-image: url('http://i41.tinypic.com/2mcds8j.png');
padding: 9px 20px 10px 5px;
margin:-1px 0 0 0;
font: 12px 'Droid Sans',arial,sans-serif;
}

Answer 3

1st thing.. why are you using so big images?
http://i41.tinypic.com/2mcds8j.png
simplified...
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat&preval=repeat-x
or better try to do it all, with out images,
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-radius
example how to do it ;)
http://www.css3.info/preview/rounded-border/