81

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

Chrome/IE8 look like this

enter image description here

Firefox looks like this

enter image description here

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; }

johnkavanagh
  • 4,614
  • 2
  • 25
  • 37
700 Software
  • 85,281
  • 83
  • 234
  • 341
  • Why did you add `margin: -1px`? Is it somehow connected to `border: 2px`? – Dan Feb 13 '14 at 13:41
  • 1
    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. – 700 Software Feb 13 '14 at 16:19
  • 1
    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: http://jsfiddle.net/Z2BMK/455/. Please zoom in and notice a red border appearing. – Dan Feb 17 '14 at 10:46
  • The only advantage of you answer I can see is preserving FF's "dotted outline when the button is active" functionality – Dan Feb 17 '14 at 12:29
  • Yes, That is exactly what makes my solution better. There should be *something* that tells the user where their keyboard is focused. – 700 Software Feb 17 '14 at 22:31
  • Keep in mind, your fiddle is not the same as my solution. Here's [a fiddle which demonstrates my solution](http://jsfiddle.net/LDeDk/) 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. – 700 Software Feb 17 '14 at 22:35
  • 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. – BurninLeo Nov 06 '14 at 14:22

3 Answers3

164

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.

Dan
  • 55,715
  • 40
  • 116
  • 154
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • 8
    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. – 700 Software Apr 19 '11 at 21:48
  • This is EACTLY what I needed. Thanks! – Abel Oct 12 '11 at 23:37
  • 11
    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` – Stefan Aug 24 '12 at 14:05
  • @Stefan, I tried those extra selectors but they don't seem to be working. – sparebytes Oct 11 '12 at 16:24
  • @sparebytes Create an example in [JSFiddle](http://jsfiddle.net/) and i can take a look at it. It works fine for us. – Stefan Oct 13 '12 at 20:15
  • 1
    @Stefan http://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. – sparebytes Oct 15 '12 at 12:20
  • @Stefan http://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. – sparebytes Oct 15 '12 at 13:18
  • @sparebytes 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) – Stefan Oct 15 '12 at 15:09
  • @Stefan It has something to do with the `line-height:1em;` rule. Without it the buttons are the same size. http://jsfiddle.net/LjhQ5/6/ – sparebytes Oct 15 '12 at 17:42
  • I found the answer to my problem: http://www.cssnewbie.com/input-button-line-height-bug/ - You can't change the line-height on inputs in FireFox... It just gets ignored. [SO Question](http://stackoverflow.com/questions/3650530/firefox-line-height-issue-with-input-fields) – sparebytes Oct 15 '12 at 17:51
  • @George: **To use a Chrome-style focus glow in Firefox**, that doesn't work in Firefox 13 – 700 Software Dec 21 '12 at 14:59
  • Wow, I wonder how you guys find this sort of things. Good tip, thanks for sharing! – alecov Jan 11 '17 at 15:53
8

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!

Kai
  • 38,985
  • 14
  • 88
  • 103
Marcelo Hexsel
  • 81
  • 1
  • 1
  • Do you have any knowledge of the browser compatibility of this solution? – 700 Software Nov 16 '12 at 13:42
  • 3
    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? – 700 Software Nov 16 '12 at 13:43
  • @GeorgeBailey: browser compatibility is Firefox 3+, this code does not affect any other browser. – Dan Feb 17 '14 at 10:51
  • @GeorgeBailey I think this answer was intended as a response to [this](http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox#comment-16189479) comment. – WynandB Feb 23 '15 at 04:26
0

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

DarkTrick
  • 2,447
  • 1
  • 21
  • 39