Navigation bar has different height in different browsers

Posted on 2011-10-24
Last Modified: 2012-05-12
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?
Question by:SWB-Consulting
    LVL 38

    Expert Comment

    by:Tom Beck
    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.
    LVL 16

    Expert Comment

    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


    Author Comment

    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?
    LVL 38

    Accepted Solution

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Several part series to implement Internet Explorer 11 Enterprise Mode
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now