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

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

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

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.