Site Loads to the Right, until finished, then centers

Question

There were 2 other threads on Stackoverflow of people having this issue. Neither applied to me. One was something about javascript. I disabled javascript on my browser, still did this.

The other was adsense banners, and I don't have any on this page.

Can someone give me an idea why this is loading to the right, and then centering when the page is fully loaded?

Thanks!

http://www.halotracker.com/Reach/TrueSkillLB.aspx?GameType=Competitive&Playlist=13

Answer 1

It's because your width on the tables is set to 100% with two of the columns with the * to determine the padding. the * character tells the table to determine the width remaining and fill it with the table. So what happens is the browser renders the first * less the fixed width of the center column. It doesn't even render the third column until after the centering occurs. You can see this with firebug and stop the load when it is still aligned to the right.

<div class="SiteBody">
 <table width="100%">
  <tbody>
   <tr>
    <td width="*"></td>
    <td width="1062"></td>
    <td width="*"></td>
   </tr>
  </tbody>
 </table>
</div>

I will say this once because so many will probably jump on this. You shouldn't use Tables to setup layout it's bad practice and it can give you problems like what you are seeing. That said, my conscience is clear.

You could remove the the first and third TD's, remove the Width 100% and set the background in the parent container. In my opinion this would be the best way to handle it. Set the margin to 0, auto and that should give you everything you are wanting.

<div class="SiteBody">
 <div class="SiteMiddle">//site content</div>
</div>

<style>
 .SiteBody { background: transparent url(image of background) }
 .SiteMiddle { width:1062px; margin: 0, auto; }
</style>

OR This is probably the best way as it layers the divs and allows you to set the backgrounds for left and right and still set a centered content with the correct width

<div class="SiteBody">
 <div class="SiteLeft">
  <div class="SiteRight">
   <div class="SiteMiddle">//site content</div>
  </div>
 </div>
</div>

<style>
 .SiteBody {  }
 .SiteLeft { background: transparent url(image of left background) no-repeat left top; }
 .SiteRight { background: transparent url(image of left background) no-repeat right top; }
 .SiteMiddle { margin: 0, auto; width: 1062px; }
</style>

Answer 2

Don't use tables for layout.

They cause the page to be rendered more slowly, and may cause very late adjustments. I'm sure you've noticed this ;)

The site design doesn't look very complex. I would advise you to remake it without the use of tables as layout (the tables for the playlists are fine of course).