Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove extra button spacing/padding in Firefox

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

like image 372
700 Software Avatar asked Apr 01 '11 19:04

700 Software


People also ask

How do I reduce padding in HTML?

Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .


1 Answers

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.

like image 177
thirtydot Avatar answered Oct 06 '22 23:10

thirtydot