CSS: Size of buttons in Chrome is different than Firefox?

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.

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.

3 if only clients understood... – andrhamm Mar 3 at 22:02 1 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. – Eddie Welker May 17 at 20:57 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. – philipp May 31 at 20:54.

Remove button padding in FF */ button::-moz-focus-inner { border:0; padding:0; } You'll get the same button appearance in Chrome and Firefox.

I found I had to also give a negative margin to get Firefox buttons to match Chromium ones. – David Oliver Jul 21 at 13:08.

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.

So I just added padding and it still doesn't help – Hank Jun 2 '10 at 2:50 1 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) – corroded Jun 2 '10 at 3:51 You mean the "Post Your Answer" button? – Marcel Korpel Aug 12 '10 at 12:15 yup that one :) – corroded Aug 12 '10 at 13:54.

Try to use -webkit-box-sizing:content-box, then read about box-models.

The thing that no one is mentioning here is that Chrome resets the CSS for these elements: inputtype="button", inputtype="submit", inputtype="reset", inputtype="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.

Here in SO the appearance of the 'Post Your Answer' button is overridden. – Marcel Korpel Aug 12 '10 at 12:14.

I've tried now to modify height and padding in the same time. The result it's quite good. Seems to be correct for both browsers (FF and Chrome in Linux)... for example i've put: .

Classname { height:20px; padding:4px; } Maybe it's just my lucky day... however you can try it.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions