Removing unwanted button padding in Firefox

May 13th, 2009

Recently I came across a issue with the <button> element in Firefox. It seems that if you have the following code:

<button><span>Text</span></button>

..and then apply CSS styles to set padding to zero for both the elements Firefox will automatically insert padding on the button. This is impossible to remove with standard CSS.

However there is an easy fix. Just add the following rule to your button element:

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

This should fix everything.

16 comments so far…

  1. Shane Robinson said on the May 24th, 2009 at 1:05 am

    OMG!!! Thank you thank you! I’ve been trying to fix this in FF for the past hour and was going crazy.

    Why don’t I learn to just “Google It” if I havent’ fixed something in 5 minutes….?

  2. get_dave said on the May 26th, 2009 at 7:35 pm

    Thanks Shane. Glad it helped you out. I spent ages looking for the solution to this too.

    Google is brilliant sometimes eh?

  3. Matt berridge said on the June 10th, 2009 at 3:09 pm

    Very helpful :)

  4. Syahir Hakim said on the June 27th, 2009 at 9:46 am

    The only problem with this method is that it the CSS code wont be valid anymore. Checking using the W3C CSS Validator yields the following error:

    The pseudo-element ::-moz-focus-inner can’t appear here in the context css21

    I’ve yet to find any workaround for this. It’s annoying.

  5. get_dave said on the June 27th, 2009 at 10:59 am

    @Syahir Hakim Thanks for pointing that out. I believe it won’t validate but personally I don’t get too hung up on the validator. However, if you’re really concerned I would put it in a separate fixes.css file along with anything else that isn’t strictly Kosher.

  6. Simon Plangger said on the July 27th, 2009 at 9:21 am

    Thanks a lot! That was bugging me for hours. I’ve yet to fully comprehend the behavior for buttons in every (relevant) browser.

  7. niggle said on the July 28th, 2009 at 9:49 am

    Thanks Dude - very clinical

  8. twenty-three said on the November 20th, 2009 at 5:27 pm

    made my day! thx man

  9. lea said on the December 7th, 2009 at 4:17 pm

    Thank you so much, you saved my day.

  10. Steve said on the January 25th, 2010 at 12:02 am

    Like everybody else here, i’ve been struggling with FireFox’s crazy button padding for ages, and this saved my layout! :) Many Thanks!

  11. Aaron said on the February 2nd, 2010 at 10:44 pm

    Great fix. Thx. Any idea how to remove the padding from webkit browsers (Safari and Chrome) on Windows? The default padding is applied to these browsers in windows but not on OSX.

  12. get_dave said on the February 2nd, 2010 at 11:36 pm

    @Aaron

    I think I might have worked out a way to fix this in Chrome with negative margin and all kinds of faff.

    To be honest lately I’ve just not been putting spans inside buttons. It’s too unreliable!

    If I work something out I’ll re-post. Sorry if that’s not much help at the moment…

  13. get_dave said on the February 2nd, 2010 at 11:44 pm

    Anyone looking to remove button padding from Webkit can try the solution at:

    http://www.google.com/support/forum/p/Chrome/thread?tid=1d651b87005fa810&hl=en

  14. Ashley said on the June 10th, 2010 at 5:44 pm

    This was a life saver! Thank you so much for putting this up!

  15. jack said on the July 14th, 2010 at 4:21 pm

    THX a lot! you saved my layout!

    :D

  16. Miles Johnson said on the July 21st, 2010 at 7:57 pm

    You should be using double span as well. It solves multiple problems when trying to style tags. Example, left and right images.

    Text

    Also double span works across all browsers with no problems (even IE6).

Leave your comment