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.

Posted on in Links

Article Comments

There have been 34 responses to this article

Leave your Reply

  1. Shane Robinson said: on May 24, 2009

    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….?

    Reply

    • get_dave said: on May 26, 2009

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

      Google is brilliant sometimes eh?

      Reply

  2. Matt berridge said: on June 10, 2009

    Very helpful :)

    Reply

  3. Syahir Hakim said: on June 27, 2009

    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.

    Reply

    • get_dave said: on June 27, 2009

      @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.

      Reply

  4. Simon Plangger said: on July 27, 2009

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

    Reply

  5. niggle said: on July 28, 2009

    Thanks Dude – very clinical

    Reply

  6. twenty-three said: on November 20, 2009

    made my day! thx man

    Reply

  7. lea said: on December 7, 2009

    Thank you so much, you saved my day.

    Reply

  8. Steve said: on January 25, 2010

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

    Reply

  9. Aaron said: on February 2, 2010

    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.

    Reply

  10. get_dave said: on February 2, 2010

    @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…

    Reply

  11. get_dave said: on February 2, 2010

    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

    Reply

  12. Ashley said: on June 10, 2010

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

    Reply

  13. jack said: on July 14, 2010

    THX a lot! you saved my layout!
    :D

    Reply

  14. Miles Johnson said: on July 21, 2010

    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).

    Reply

  15. andresgutgon said: on August 14, 2010

    Thanks a lot, it works perfect

    Reply

  16. Ilian Andreev said: on August 19, 2010

    Saved a lot of pain to me as well, thank you!

    Strange that FF falls here but IE doesn’t.

    Reply

  17. JB said: on September 2, 2010

    You save my life ;)

    Reply

  18. never_again said: on September 10, 2010

    Oh! Jesus!! Thank you so much… This works like a charm!

    Reply

  19. Martin Zvarik said: on October 21, 2010

    You’re the man dude!

    Reply

  20. Leek said: on October 22, 2010

    Thanks a lot.

    Reply

  21. dominic said: on January 21, 2011

    nice one thanks!

    Reply

  22. Guilherme said: on January 28, 2011

    Thank you very much for this fix! It worked nicely here.

    Reply

  23. Clara said: on January 31, 2011

    I was almost giving up! Thanks, very useful

    Reply

  24. James Chapman said: on March 31, 2011

    Good tips there…

    Would it not be easier and less buggy to use a submit input tag instead and style accordingly? Thoughts?

    Reply

  25. Ken said: on March 31, 2011

    THANK YOU SO MUCH. I have spend more than one hour fidling with this, until I came by your site.
    You really saved my day

    Reply

  26. Mahesh said: on April 9, 2011

    10000 Thanks, you saved my huge time by giving perfect and brilliant solution.

    Thank you :)

    Reply

  27. Sam said: on April 12, 2011

    THANK YOU!!!!!!! I wish I’d just googled this an hour ago >_<

    Reply

  28. David Smith said: on March 24, 2012

    Testing

    Reply

  29. Fábio said: on May 23, 2012

    HUHU! I was going MAD whith this! I’ve been trying to fix my code for almost a week. Why didn’t I just search the web… and, why does Firefox do this in the first place? I hate these thing!
    Anyway, THANK YOU!

    Reply

  30. Pete Droll said: on July 12, 2012

    Exactly what I was looking for! Thanks for posting!

    Reply

  31. Charlottesville Media Group said: on August 10, 2012

    YES! Thank you.

    Reply

  32. Elad Ossadon said: on August 30, 2012

    Thanks!

    Reply