Firefox Add's 2Px Padding in a Submit Button

Firefox add's 2px padding in a submit button

I was having a problem like this. I then found this CSS thingy that solved the problem:

input::-moz-focus-inner { border:0; padding:0 }

This solution was given in a comment in this blog post:

Bulletproof CSS input button heights

As the post says: this happens because Firefox (User Agent) own CSS style uses !important and anything one tries to do to override the CSS property won't get applied.

Input (submit) element occupies extra space in Firefox

Remove button padding in Firefox by using input::-moz-focus-inner in your CSS:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{
    border: 0;
    padding: 0;
}

EDITED: Updated Demo Link with above code.

SEE DEMO in firefox

Remove extra button spacing/padding in Firefox

Add this:

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

http://jsfiddle.net/thirtydot/Z2BMK/1/

Including the border rule above is necessary for buttons to look the same in both browsers, but also it removes the dotted outline when the button is active in Firefox. Lots of developers get rid of this dotted outline, optionally replacing it with something more visually friendly.

Text input and submit input elements have different height in firefox

All browsers have differences between default behaviours and styles, but firefox is more flexible with S.O. and form elements are controlled by default by the operating system.

The solution is remove padding or use height with EM meassures.

Remove padding:

https://jsfiddle.net/04camn42/2/

 .class { padding: 0 }

Using EM height:

https://jsfiddle.net/04camn42/3/

 .class {
     height: 1.5em
 }

IF you use EM you don't worry about responsiveness and user choices.

Why the extraneous horizontal padding inside button (Firefox only)?

Add this styles to fix it:

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

Code snippet (JSFiddle):

* {    outline: none;}
button {    background: firebrick;    width: 200px;    height: 40px;
    margin: 0px;    padding: 0px;    border: none;}
button > div {    background: lightskyblue;    margin: 0px;    padding: 0px;    border: none;}
button::-moz-focus-inner {    padding: 0;    border: 0;}

<div style="padding: 60px;">    <button>        <div>label</div>    </button></div>

input type=submit text vertical alignment in Firefox

I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

I hope this helps.

---

Related Topics