Navigation bar has different height in different browsers

In chrome:


You can see that in the latter the black navbar is narrower than in the former.

This problem does not occur in FF, why in Chrome? How can I resolve it?
Who is Participating?
Tom BeckConnect With a Mentor Commented:
You are going to need to pick a standard and use it consistently. Mixing in HTML 5 tags like <nav and <header in a page that has a Doctype of "Transitional" is having unpredictable results. For example, the navigation bar does not render at all in IE8. If you don't care about supporting older browsers then change your Doctype to <!DOCTYPE html>. Then fix the navigation bar if the problem still exists. Otherwise, you are just putting band-aids on invalid markup.
Tom BeckCommented:
Not sure if this is the reason for the difference, but in the second link, you are using the <nav> tag, however your doctype is "Traditional". <nav> is an HTML 5 tag and requires the <!DOCKTYPE html> like you have in the first link to get full compatibility. Firefox may be giving you a pass on that.
In the first page (based on #access, line 552 in styles.css) :
margin: 0 auto 6px;

Open in new window

On the second page (based on# access, line 606 in genesis.css):
margin: 4px auto 6px;

Open in new window

SWB-ConsultingAuthor Commented:
OK, but if you try and see what the result would be of adjusting it in genesis.css, you'll see that it only makes it worse. How can I make it so both bars look exactly the same in chrome?
All Courses

From novice to tech pro — start learning today.