Site loads on the right, then shifts to its actual position

Question

There is a link at the bottom. Pretty much what happens, is when the page gets opened, it loads entirely on the right side of the screen. Then when it finishes loading every single element, it moves to the center which is it's actual position.

I believe the problem is caused by javascript, since the site works perfectly fine without it. It doesn't seem to matter what javascript is included, if I leave just 1 of them, the whole thing comes back.

Could really use the help. Also the site right now is about 500 pages big, so I'm really hoping for a solution which can fix this with just a few steps.

Thanks.

Here is the link to the page so you can get css/code: http://bit.ly/3EyoWu

Answer 1

Its definitely javascript. I think the banners on your site are loaded at the very end, which leaves the browser making incorrect guesses about the dimensions of the content until the page is loaded.

Try enclosing your javascript code inside fixed width (and height) divs or tables. You can easily determine the width (and height) required by javascript generated code by inspecting your page after its loaded. If its the banners, they are almost always predefined size.

Edit 1 ----

I got it. The specified cell widths for your table are narrower, the browser therefore is unable to calculate the page layout until the page is rendered completely. A column with width 110px has a banner having width = 120px.

Edit 2 ----

Try specifying widths for all-but-one column. That is, if you have three columns in the suspect table, specify the width for two, and let the browser decide the width for the third. Furthermore, the banners seem to occupy a width of 125px instead of 120px, probably because of unnecessary white space around them. I suggest that you revise the column widths appropriately (and parent table's width if necessary).

Answer 2

This might almost qualify as a 'flash of unstyled content' (FOUC) except that the browser doesn't first render a page in an unstyled format.

Instead, you see styled content before the Javascript is able to add the finishing touches.

You might get some further hints by searching for 'flash of unstyled content'.