Submit button CSS problems

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:

http://i41.tinypic.com/dv1b6.png

http://i41.tinypic.com/2mcds8j.png

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?

• Francisco Paulo: Are you unable to use CSS3? If you could, you didn't need to go through all that work to style a button. Plus you could use a visual generator (ex: css3button.net )

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

• MultiDev: Alex,Thanks for this. It looks good in Firefox, but now it looks strange in other browsers. :(

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/