Remove extra button spacing/padding in Firefox

Question

See this code example: http://jsfiddle.net/Z2BMK/

Chrome/IE8 look like this

Firefox looks like this

My CSS is

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

How can I change the code sample to make the button the same in both browsers? I do not want to use JavaScript based hyperlinks because they do not work with space bar on keyboard and it has to have an href URL which is not a clean way to handle things.

My solution, since Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

Wurster

Why did you add margin: -1px? Is it somehow connected to border: 2px? – Mellisamellisent

See my edit. The border-width of the -moz-focus-inner was 1px by default, so the writing border-width into the code is redundant, but it makes it more clear what is going on. It is possible it may help in future-proofing as well. To answer your question, the border-width in Firefox was the cause of the difference, and adding margin: -1px is the solution which is more compatible than my previous solution. – Wurster

I think the accepted answer is visually equivalent, but better than your solution. Accepted answer removes stuff added by FF, and makes things render the same way in all browsers. Your solution leaves an extra border added by FF on its place, and hides one pixel of two-pixel border using margin: -1px. This is overcomplicated. It breaks if: 1)A bug in rendering engine appears(that happens), 2)Borders get different color, 3)You zoom in. To demonstrate potential problems with your solution, I've prepared a fiddle: jsfiddle.net/Z2BMK/455. Please zoom in and notice a red border appearing. – Mellisamellisent

The only advantage of you answer I can see is preserving FF's "dotted outline when the button is active" functionality – Mellisamellisent

Yes, That is exactly what makes my solution better. There should be something that tells the user where their keyboard is focused. – Wurster

Keep in mind, your fiddle is not the same as my solution. Here's a fiddle which demonstrates my solution better. The zoom problem does not apply. I admit my solution may not be future-proof, but I'm willing to bet that it will be. – Wurster

Still an issue in 2014 - and still very helpful, thanks! I may add that it may be encessary to also reduce the line-height of the button, if it contains nothing but an image. – Underfoot

Answer 1

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.

Perfectionist

To use a Chrome-style focus glow in Firefox, use button{background:/*Something here*/} button:focus{-moz-box-shadow:0 0px 3px #C80;}. This compensates for not having the dotted line and gives the browser consistency I was after. – Wurster

To fix it on input elements aswell add 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 – Scourge

@Stefan, I tried those extra selectors but they don't seem to be working. – Lotion

@Lotion Create an example in JSFiddle and i can take a look at it. It works fine for us. – Scourge

@Scourge jsfiddle.net/LjhQ5/1 It seems to be working correctly (except for the file css). Sorry there must have been conflicting css on the page I was trying to do it on. Thanks. – Lotion

@Scourge jsfiddle.net/LjhQ5/2 Got to work and tried figuring out what the issue is. This should work in FF but isn't. I believe the styles are being applied, I'm just not sure why the button element is smaller than the rest. – Lotion

@Lotion If you change the value for padding to like 100px you can see the setting has an effect in FF (for me it does). Also you forgot a semicolon after the border declaration (i dont know what effect that has) – Scourge

@Scourge It has something to do with the line-height:1em; rule. Without it the buttons are the same size. jsfiddle.net/LjhQ5/6 – Lotion

I found the answer to my problem: cssnewbie.com/input-button-line-height-bug - You can't change the line-height on inputs in FireFox... It just gets ignored. SO Question – Lotion

@George: To use a Chrome-style focus glow in Firefox, that doesn't work in Firefox 13 – Wurster

Wow, I wonder how you guys find this sort of things. Good tip, thanks for sharing! – Demona

Answer 2

To fix it on input elements as well add

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

is simple perfect!

Ammamaria

Do you have any knowledge of the browser compatibility of this solution? – Wurster

Isn't input[type="file"] > input[type="button"]::-moz-focus-inner redundant since you already added input[type="button"]::-moz-focus-inner, or is that not your experience? Do you know? – Wurster

@GeorgeBailey: browser compatibility is Firefox 3+, this code does not affect any other browser. – Mellisamellisent

@GeorgeBailey I think this answer was intended as a response to this comment. – Pearlstein

Answer 3

Corrected version of @thirtydot's answer:

button:: {
    padding: 0px;
    border: 0px;
}

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

Regarding Firefox 87:

• button in button::-moz-focus-inner cannot be a class. (E.g. .mybutton::-moz-focus-inner does not work)

• There must be a button { padding:0px; border: 0px; } style present as well (This style can be given per class).

Crayton