Why jquery ui button looks different in Firefox and Chrome

Question

I have uploaded an example page https://bobdn.com/Temp.aspx.

This page has just a single jquery UI button.

Why does this look little large in firefox. Padding an

Answer 1

My guess it that it's inconsistent rendering of the <input> element. I can verify that the rendering is inconsistent between each browser, with a 2px height difference.

If you can use a <button> element instead, you may find that it renders more consistently from browser to browser, although you will most likely have to adjust padding yourself.

That done, you need to try setting any of the relevant styles explicitly, rather than relying on defaults. This includes: line-height, padding, font-size, border-width, and perhaps more. Every browser has it's own defaults. If you want consistency, you must provide css that replaces the default values.

Answer 2

I fixed this problem by setting the defaults explicitly.
Ex. I created a input.navigation_button CSS class with padding:2px (Chrome had zero padding on my buttons).