Small difference IE/FF vs Chrome/Safari on primary navigation

[Scott DeToffol]

I'm using a background image 44px tall to make my primary navigation menu look like it extends the full browser width (orange bar at the top). On IE and Firefox, the background image and primary navigation menu line up perfectly. On Chrome and Safari, the primary navigation menu is 1 px shorter (43px).

Any ideas?

http://www.navitor.com/blog/

 

---

http://www.navitor.com/blog

[rbrown08]

I'm having a similar issue with my navigation menu.  I wish someone would answer your question; I can't figure it out or find any information online.

---

@Roxann3Brown

[skstudio]

I am having the same issue as well. FF/Chrome seem to line up, but IE is off.
See example here: http://imgur.com/4glfkZK.
I think it's how the browsers are interpreting the font and spacing. Could use some guidance. Thanks!

[MarketLeaner]

for navigator.com I think your issue is might involve your 1px border.

If its a border-box issues check out http://caniuse.com/css3-boxsizing
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
also read on w3schools.com that

The box-sizing property is supported in Internet Explorer, Opera, Chrome, and Safari.
Firefox supports an alternative, the -moz-box-sizing property.

http://stackoverflow.com/questions/11678341/the-padding-used-in-my-menu-is-off-by-1px-between-firefox-and-chrome-how-do-i-f

also read here that adding { line-height: normal; padding: xyx } works for some people:
http://stackoverflow.com/questions/4439537/1-pixel-line-height-difference-between-firefox-and-chrome

[Author]

Posts