Question

On all my buttons the padding is behaving differently in firefox. From research I know this is because FF has some strange settings in the default stylesheet but I have added the general fix into my stylesheet. That’s fine and I can live with that apart from one button will not fit into the toolbar in firefox because the padding makes it too big.

Jsfiddle here.

Usual fix;

input[type=button]::-moz-focus-inner{padding:0; border:0;}

The css for the button with a few things removed;

.buttonBlue {background-color:#008abd; border-radius:0.2em; 
             font-family:inherit; 
             color:white; border: 1px solid black;
             cursor:pointer; 


             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#008abd', endColorstr='#036b91');
             background: -webkit-gradient(linear, left top, left bottom, from(#008abd), to(#036b91));
             background: -moz-linear-gradient(top,  #008abd,  #036b91);


    }

Answer 1

If you set an element’s appearance attribute to none, any well-behaved browser will drop its gui flavor.
https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance

For buttons, the default value for appearance is “button”. Setting it to “none” explicitely should override the browser’s built-in platform-native styling, including weird padding.

Firefox is not the only browser reacting to this attribute: Safari and Chrome listen to the -webkit-appearance variation, and Opera listens to the -o-appearance variation. I don’t know about MSIE9 or 10.