CSS: Size of buttons in Chrome is different than Firefox

Question

I have the following HTML code:

<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form> 
... 
<input class=submitbutton type=submit value="Create Listings" /> 
</form>

In Firefox, the input button has more padding than in Chrome.

Any ideas why?

UPDATE: If you're wondering why I have the negative margin - it's because between the input field and the input button - there is too much space.

Solution 1

/* Remove button padding in FF */
button::-moz-focus-inner {
    border:0;
    padding:0;
}

You'll get the same button appearance in Chrome and Firefox.

Solution 2

Even though you as a developer test in different browsers and see the difference in buttons, the user will not. It's too easy to get focused on things that users won't notice: the user likely has either Firefox or else IE or else Chrome, but not all of them. Rarely do users ever switch browsers over time let alone switch between them and complain about a few pixels diff.

So if you consider the buttons and the experience in just one browser at a time, and if it works well in that experience/browser, then don't bother spending more time. Instead move onto next steps.

This doesn't answer 'why' but somebody else explained that one.

Solution 3

form elements render differently(as defaults) depending on the OS and/or browser. if you want your form elements(input fields, submit buttons, etc.) to look the same in all instances, you have to explicitly style them using borders, paddings and margins.

Solution 4

Try this

/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}

Solution 5

The thing that no one is mentioning here is that Chrome resets the CSS for these elements:

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button

So no matter what you set the padding to, as far as I can tell, it will be overridden by Chrome. I have tried using !important as well as other techniques and still no luck. If anyone has any insight into this I would love to know.

View more solutions

Comments

[Hank]

So I just added padding and it still doesn't help

[corroded]

like i said you still have to set the borders etc. if you want a button that looks like the "add comment" button here in SO, it has border: 1px solid #000, side padding of about 5px, background color of #ccc. (all approximations just on top of my head sorry :P)

[Marcel Korpel]

Here in SO the appearance of the 'Post Your Answer' button is overridden.

[Marcel Korpel]

You mean the "Post Your Answer" button?

[Eddie Welker]

While that's true and I agree with it (I use that premise every day), button size affects both the usability and accessibility of a page. With those in mind, a larger button target can be quite valuable.

[philipp]

That might be a good solution if your button is stand alone. But as soon it's right next to other elements that should have the same hight and are aligned on the bottom your layout will just break.

[David Oliver]

I found I had to also give a negative margin to get Firefox buttons to match Chromium ones.

[Kirn]

I had to give you a +1 for this, immensely helpful! Why can't you see the Mozilla proprietary pseudo classes in Firebug??? Chrome has them.

[Armand]

+1 as it seems to remove some random horizontal "padding" on the button text, but I still get 1px above and below the text that shouldn't be there.

[Arthur]

{ "Why can't you see the Mozilla proprietary pseudo classes in Firebug??? Chrome has them" } DOM Inspector addon can

[Kelly Elton]

You can't see that stuff in the built in developer tools in firefox either.