Remove extra button spacing/padding in Firefox
button, css, firefox, spacing
Solution
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.
Problem
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; }`