What causes this weird display ? I suspect it might be CSS or a bug in Chrome OS X?

This is what the weird view looks like, in Chrome on OS X on first load:

That blue bar running right across the screen is actually the navigation bar that should be at the top of the screen. See below.

This is what the original view looks like, and this is what it reverts to - once I scroll down (so that portion of the screen disappears) and scroll back up:

Edit1: I don't even know what code to post, if any because it is kinda random. If you ask some questions though, maybe something might jump out and I will know what code to either post or look at.

Thanks.

Edit2: Here is the code for the div#navigation:

<div id="navigation"> 
        <div id="quota-info"> 
            Plan: Chameleon<br /> 
            # of Projects: 2 / 20<br /> 
            # of Clients: 2 / 15<br /> 
            Storage: 10.8 MB / 10.0GB <br /> 
        </div> 

        <div id="user-info"> 
            <span class="username">Hi Test</span><br /> 
            Name: Test User<br /> 
            Email: test@abc.com<br /> 
            Last Logged In: about 2 hours ago<br /> 

        </div> 


        <ul> 
            <li><a href="/ho开发者_运维问答me/index"><img src="logo.png" /></a></li> 
            <li id="dashboard"><a href="/home/index">Dashboard</a></li> 
            <li id="settings"><a href="/settings">Settings</a></li> 
            <li id="logout"><a href="/logout">Logout</a></li> 
        </ul> 
    </div> 

Here is the CSS:

#navigation {
    font-family: Verdana, Arial,  sans-serif;
    font-size: 13px;
    background: #2d343f;
    background-image: url('../images/nav-textured-bg.png');
    background-repeat: repeat;
    padding: 5px 5px;
    margin: 0px auto;
    position: relative;
    height: 75px;   
}

#navigation a {
    text-decoration: none;
    padding: 10px 15px;   
    display: inline;
    height: 35px; 
    line-height: 35px;
    color: #c6c8cb;
}

#navigation ul {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

#navigation li {
    width: 100%;    
    display: inline;
    list-style-type: none;
}

#navigation li img {
    position: relative;
    top: 15px;
}

Edit 3:

Here is another screenshot of how it looks when I scroll up. The top navigational bar is still there. This blue thing is not even the menu, it's like a screenshot of it. When I hover over the menu links, they don't work.

You have to create a reduction. Start with a copy of the actual page and then remove stuff not related to the problem, one by one, until it disappears. Then you'll see what's causing it, whether it's a browser bug and what you can do to fix it.

PS: If it's a browser bug, don't neglect to report it. It's a web developer's responsibility.

I would start by cleaning up some of your CSS.

#navigation {
    font-family: Verdana, Arial,  sans-serif;
    font-size: 13px;
    background: #2d343f;
    background-image: url('../images/nav-textured-bg.png');
    background-repeat: repeat;
    padding: 5px 5px;
    margin: 0px auto; <--- see below
    position: relative;
    height: 75px;   
}

this should be margin:0 since it's a block element. Block elements take up the entire line, so trying to center it makes no sense.

#navigation a {
    text-decoration: none;
    padding: 10px 15px;   
    display: inline; <--- conflict (see below)
    height: 35px;   <--- conflict (see below)
    line-height: 35px;
    color: #c6c8cb;
}

Inline elements can't have a width or height applied to them, but some browsers when you try to will automatically convert any inline element to inline-block for you. If that is what you want, you should specify it, otherwise drop the height.

#navigation ul {
    width: 100%;
    margin: 0 auto;  <-- see below
    text-align: center;
}

Centering an item with 100% width does not make sense here

#navigation li {
    width: 100%;  <--- conflict
    display: inline; <--- conflict
    list-style-type: none;
}

#navigation li img {
    position: relative;
    top: 15px;
}