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.

Answer 1

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.

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

Answer 3

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.

Answer 4

mmm i can't figure it out either. tis a bugger!