Taming Firefox’s Button Element

October 5th, 2009 Posted by steve in Code, Design

Recently I came across a little cross browser bug concerning the “button” element that caused some headaches between Webkit browsers and Firefox. The button element can be a great tool that is generally under utilized. It offers many more flexible options than the “input” element and degrades more gracefully than the “a” element. A great writeup can be found on the Particle Tree blog (Creators of the amazing form creation tool, Wufoo).

The problem I was encountering was when I was adding a span inside the button for design resigns and realized that no matter what I did Firefox was adding a few pixels padding into the button on the sides and a pixel on the top. A great demo page of the various default button paddings on all the major browsers can be found at the design detector. Here it clearly shows Firefox 2′s default is 3px, but Firefox 3.5′s default is 2px. I must credit Paul O’B on the Sitepoint Forums for finding the solution. In Firefox’s Forms.css file there is a line that goes a little something like this:

button::-moz-focus-inner,

input[type="reset"]::-moz-focus-inner,

input[type="button"]::-moz-focus-inner,

input[type="submit"]::-moz-focus-inner,

input[type="file"] > input[type="button"]::-moz-focus-inner {

padding: 0px 2px 0px 2px;

border: 1px dotted transparent;

}

This gives us a few key insights as to how to fix a couple of problems. The first being that pesky padding that is so hard to get rid of. Simply add this to your stylesheet:

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

To further fix some issues with styling buttons the way you want them, you can remove the border as well. However in most cases, not all, this can considerably hinder usability by preventing the user from knowing when the button is focused via keyboard navigation. So if you remove that dotted border as well in this declaration, than I highly suggest you find an alternate way of indicating that buttons focus. More soon.