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

Last 5 posts by steve

• Why 2010 is Going to be a Great Year for HTML/CSS Developers - February 5th, 2010
• Being a More Efficient Web Designer - October 18th, 2009
• Getting Your Pages Ready for IE8 - May 5th, 2009
• Flash & HTML Website Integration - Best Practices - May 1st, 2009
• Review: MacRabbit's Espresso - April 14th, 2009