Adsense Javascript aligning site on to the right while loading

Question

Basically the page is coded centered, but what happens is that on load it goes to the right, completely loads the page with all the images, all the ads, and then when it's finally done, it'll move back to the center.

Here is the CSS: note I'm a total noob, so most of it is cobbled together from other websites. The only javascript on the site is the google adsense.

body, html {
    margin: 0; 
    padding: 0;
}

body {
    background-color: #0A0A0A;
    background-position: left;
    background-repeat: no-repeat;
}

img {
    border: 0 none;
}

p {
    margin: 0;
    padding: 0;
}

.shell {
    background-color: #0A0A0A;
    margin: 0 auto;
    width: 750px;
}

.topnav {
    border-bottom: 2px solid #68879A;
    text-align: center;
    width: 100%;
}

.topnav ul {
    height: 20px;
    line-height: 18px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 2px 0;
}


.topnav a {
    border-right: 2px solid #484848;
    color: #ABAAAA;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 0 5px;
    text-decoration: none;
    text-transform: uppercase;
}

.topnav a: hover {
    color: #FFFFFF;
    font-size: 10px;
    text-decoration: none;
}

.homenav a {
    color: #999999;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
}


.homenav a: hover {
    color: #FFFFFF;
}

.textbig {
    background-color: #0A0A0A;
    background-position: left top;
    background-repeat: repeat-x;
    clear: both;
    color: #999999;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 0;
}

.text {
    background-color: #0A0A0A;
    background-repeat: repeat-x;
    clear: both;
    color: #999999;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 0;
}

.footer {
    background-color: #0A0A0A;
    background-position: left top;
    background-repeat: repeat-x;
    clear: both;
    color: #999999;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 20px 0;
}

.footernav {
    float: left;
    width: 90%;
}

.footernav a { 
    color: #999999;
    text-decoration: underline;
}

.ImgBorder {
    border: 1px solid black;
}

.ImgBorder: hover {
    border: 1px solid white;
}

Answer 1

Without looking at your code, it's hard to tell why this is happening.

I can guess though.

You might have a link to a style sheet below a JavaScript include at the top of the page. The page is considered loading until all of its elements load (including JavaScript). You might want to try moving your Javascript references to the end of the document just above the </body> tag.