Archive for May, 2009

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.

Posted in Tips and Tricks |

16Commments