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:

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?

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 ) — Francisco Paulo
– Francisco Paulo, Commented Mar 19, 2012 at 17:24

chipcullen · Accepted Answer · 2012-03-19 17:29:57Z

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?

answered Mar 19, 2012 at 17:29

chipcullen

7,0001 gold badge23 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2012-03-19 17:32:14Z

0

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

answered Mar 19, 2012 at 17:32

Alex

6,4362 gold badges22 silver badges26 bronze badges

1 Comment

MultiDev Over a year ago

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

Sparky · Accepted Answer · 2012-03-19 17:35:28Z

0

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/

edited Mar 19, 2012 at 17:35

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Mar 19, 2012 at 17:30

F3rr31r4

2681 silver badge7 bronze badges

Collectives™ on Stack Overflow

Submit button CSS problems

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related