Header loads incorrectly in Chrome, please take a look

[twebman84]

SITE: http://blog.detroitathletic.com/

 

Load it in Google Chrome and notice how the header loads above the browser window, like it's scrolled up. The topNav menu lays over the wrong part of the site. But if you mouse over the header graphic the header slides down and the topNav aligns properly. See the attached graphic, it shows what I mean. The topNav menu (Blog Home, Tigers, Lions, etc. should be aligned over the darker strip about 40 pixels above)/

 

What is the problem here? The site loads fine in all other browsers.

 

I have included the CSS for the elements I'm using in the header.

 

#topNav { position: absolute; top: 95px; left: 650px; color: #fff; font-weight: 700; font-family: Georgia; }

#topNav a { color: #FFF; font-size: 16px; font-weight: bold; padding-right: 20px; }

#topNav a:hover { color: #FFFF33; }

#phone { position: absolute; top: 119px; left: 215px; color: #FFF; font-size: 14px; font-weight: bold; font-family: Georgia; }

#header { min-width: 990px; padding: 0; }

#branding  { width: 1000px; margin: 0 auto; padding: 0; background: url(/wp-content/themes/arras/images/bg-header.jpg) no-repeat; }

.logo	 { max-width: 590px; float: left; padding: 0px 0 25px 10px; }

 

Here's the code from the header file:

 

<div id="header">

<div id="branding" class="clearfix">

<div class="logo">

	<a href="http://www.detroitathletic.com/servlet/StoreFront"><img src="http://beta.com.s60787.gridserver.com/wp-content/uploads/2011/11/logo1.png"></a>

</div>

        
        <div id="topNav">

        <a href="/index.php">Blog Home</a>

        <a href="/category/detroit-tigers/">Tigers</a>

        <a href="/category/detroit-lions/">Lions</a>

        <a href="/category/detroit-red-wings/">Red Wings</a>

        <a href="/category/detroit-pistons/">Pistons</a>

        <a href="http://www.detroitathletic.com/servlet/StoreFront">Shop</a> 

        </div> 

        <div id="phone">1-877-604-4490    (10am - 5pm EST)</div>

</div><!-- #branding -->
</div><!-- #header -->

[Pikachu2000]

Have you gone through all of the CSS and HTML validation errors to make sure it isn't one of them that's causing the problem?

[twebman84]

Thanks, Pikachu. I'm doing that now, but at first glance I don't see anything odd.