Why is padding appearing differently in different browsers?

Question

I have a site with a navigation menu that appears fine in Google Chrome but appears differently in the other browsers. Why?

The URL is: http://www.liquidchurch.com/satur8te-home/

In Chrome (45) the padding 22px 15px 21px 13.95px displays correctly.

But in Firefox (40) this same padding shows up as being too short.

In Internet Explorer (11) the same padding shows up as being too long, resulting in the navigation breaking onto a second line.

In Firefox I can fix the navigation by changing the padding left value from 13.95 to 14.5 px

In IE I can fix the navigation by changing the padding left values from 13.95 to 12.6 px

Answer 1

I believe this is to do with text rendering and not padding. Firefox in particular renders a little heavier which can cause a small shift in the width of an element. – Paul Redmond 58 mins ago

This is exactly correct. See the differences between the various browsers in text rendering.

This has been around a long time and is very annoying. It would be better, instead of hard-coding your width into the style, to code it in such a way that it is responsive to the width of the page and weight of the rendered font.

An even better trick would be to take your background for each of the buttons and stretch it across the entire menu and set it's width. Then you could cut and divide the <ul> for each menu item and let the last item be ambiguous so it fills out to the end.

Here's a JSFiddle to demonstrate this using the HTML and CSS from your site.