Firefox buttons have padding, Chrome buttons do not

Question

How do I get my <button>s to look consistent in Firefox and Chrome? Is there a non-conditional CSS solution? Right now, Firefox's buttons have extra padding even though YUI's CSS Reset made the padding 0.

HTML button

I discovered that to get the same appearance, Chrome needs to have double the padding.

            #fileActions button {
                padding: 0.2em;
            }

@media screen and (-webkit-min-device-pixel-ratio:0) {
            #fileActions button {
                padding: 0.4em;
            }
}

Chrome

Chrome computed style

Firefox

firefox computed style

I also have never been able to remove all the padding from Firefox buttons. Just an example of what I have run in to is here: http://jsfiddle.net/Z2BMK/. IE8, Chrome work correctly. Firefox adds mysterious padding. I would use a tags instead of buttons but I don't like the way a tags can be dragged and also a tags do not automatically trigger on space bar when focused. — 700 Software, Feb 26 '11 at 03:35
I try to stay away from `` for things that trigger javascript. **(1)** It's not semantically correct. `` is supposed to go to a new URL. **(2)** There's extra code for an `` to simulate a ` — JoJo, Feb 26 '11 at 19:16
possible duplicate of [Remove extra button spacing/padding in Firefox](http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox) — Dan, Feb 17 '14 at 10:55

score 4 · Accepted Answer · answered Feb 27 '11 at 22:57

4

Firefox gives buttons something called inner focus, this allows it to draw the dotted focus line. There is a rule in forms.css for it, which gives it 1px of border and 2px of left and right padding. I don't know whether it's possible to override this from a web page.

answered Feb 27 '11 at 22:57

Neil

54,642
8
60
72

1

It is. The only drawback is that it will not get a dotted line when focused. http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox/5518143#5518143 – 700 Software Apr 02 '11 at 11:23
@George Bailey Thanks for the link. – Neil Apr 02 '11 at 19:23

score 0 · Answer 2 · answered Feb 25 '11 at 20:50

0

It´s hard to say without seeing your css, but if you check the css of the YUI reset, you will see that it does not set or reset any properties for the button element except for the inherited ones and that does not include padding as far as I know.

answered Feb 25 '11 at 20:50

jeroen

91,079
21
114
132

My CSS is *cascaded* across several *sheets* and several locations, so I thought it would be easier to provide the computed styles. Isn't this all that matters? Both the computed styles on FF and C show that padding is 0. – JoJo Feb 25 '11 at 21:20
@JoJo I´ve never had this problem before, do you have a live example? – jeroen Feb 25 '11 at 21:26
It's a little bit hard to show because our website requires a video player plugin to function, but I have a workaround. Go to http://www.veetle.com. Then open up your console (Firebug) to append a new button to the very bottom of the page: `$$('body').first().appendChild((new Element('button')).update('button'));`. You'll see that the button has extra padding in FF. – JoJo Feb 25 '11 at 21:41
@JoJo Very strange, I´ve never run into that before but you're right `padding:0` does not remove all padding in Firefox. No idea how to solve that one... – jeroen Feb 25 '11 at 21:55
That's why I prefer to use `` instead of ` – JoJo Feb 25 '11 at 22:44
@JoJo Don't get me started on buttons and IE6, it submits them all if you click one... – jeroen Feb 25 '11 at 23:34

Firefox buttons have padding, Chrome buttons do not

2 Answers2