Site Loads to the Right, until finished, then centers

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

---

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>

---

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).

---

Hm, it's difficult to say, but this may be because of the right box with "position:absolute"

Maybe you should get rid of the table centering your main content, so as not to confuse your browser about the positon of every element on the page.

Try this one for HTML:

<div class="SiteBody">
<!-- remove table stuff here -->
  <div class="container">
    <!-- Your content -->
  </div>
<!-- remove table stuff here -->
</div>

with this CSS:

.SiteBody {text-align:center;}
.container {width:1062px;margin:0 auto;text-align:left;position:relative;}

---

I'm guessing it's Cufon - which replaces your fonts after the dom is loaded. Can you replace Cufon and see if you still have this issue?

If that doesn't can you put up a test version of your page with all the script tags removed?

---

1. Don't use TABLES for layouts. If you use TABLES, use fixed width cells.
2. Move JS script tag to the end of HTML code.
3. Try to disable one by one the JS scripts and see what's happening.
4. Monitor your HTML rendering in real-time with Firebug.

---

After analysis of your site, below are my comments:-

1. Page total weight is of 2736.6 Kbytes (Which is high)
2. CSSImages weight is 986 Kbytes
3. JS files weight is 623.2 Kbytes
4. If you can use caching on server for CSS & JS files then page load will reduce
5. As CBRRacer mentioned, you should handle that too

---

I stripped all the javascript, cufon, absolute divs, etc from the site here

http://www.halotracker.com/Test/Halo%20%20Reach%20Challenges.htm

The only thing left is the tables. And I've seen the tables work before. I've always used tables and this problem randomly started. Anyway, cant figure it out, none of the answers given to me were complete.

Enjoy my reputation points CBRacer.