CSS Layout Issue Chrome vs Firefox

I have a website here:
http://70.32.85.125/

In Chrome 36 there is extra white space under the main navigation. You can see it if you hover over one of the main nav items.

This space goes away on the interior pages:
http://70.32.85.125/index.php/about/our-mission/

The 2 pages above look good in Firefox 29.

Any attempt I make to fix Chrome, messes up Firefox, etc. Any ideas on how to fix this?

Thanks.

Hi, on the home page you have class=“home” set on the <body> tag, which then allows for this CSS in your stylesheet to be activated. This occurs only on the home page obviously, thus other pages aren’t affected.

 .home #feature{        margin: 37px 0 0;
        background-color: #607889;
    }

The margin is coming from that line. You might also want to validate your page, thre are a few errors.

I’m also confused, you have a FF only CSS in there to make the top margin only 28px. Why are you doing so many cross browser margin settings? There is no need for it.

Hi Ryan,

Thanks for the direction to look in. I fixed the margin and all is well in Chrome, FF, and Safari.

This is a purchased theme that has been modified. I didn’t do any of the heavy coding so I can’t answer your question about the cross-browser margin settings. I’ll have to check in with my developer on that.

Thanks again!

If your developer is finding the need to have specific browser margin settings on there, it’s most likely not needed and he’s just masking issues. Fair warning :).

I hear ya loud and clear.
Thanks.