Blank page while loading in IE

[cooleo100d]

Hey,

If you go to my site: http://www.totw.com/ in internet explorer, you might notice that for some reason the page remains blank until everything is loaded, and then it loads everything instantly.

This doesn't happen in Firefox. I can't seem to figure out why IE would do this. Also, it only happens when the page is not cached (first access or refresh). It's annoying because on a slow loading connection it can look like the page isn't coming up. Does anyone know why IE is showing a blank page like that, and then once everything is loaded, showing everything?

Thanks, and any help is greatly appreciated.

[ronaldb66]

Much of it has to do with the fact that you have the whole page in a single layout table; IE seems to hold rendering until everything is loaded to prevent reshuffleing the content in case it doesn't fit (FF however doesn't seem to mind a bit of re-rendering).

Maybe this behaviour can be influenced, but it would be a much better idea not to use tables for layout purposes. For starters, break up the various page sections into several separate tables: that will aid IE in rendering the page in portions.
Also, it's advisable to include a correct doctype (http://www.codingforums.com/showthread.php?t=18346) to prevent IE from kicking into quirks mode.

[cooleo100d]

I can't thank you enough for your help. The solution you suggested of splitting it up into multiple tables fixed the problem and the layout works a lot better. I'd love to have a pure CSS layout (no tables), but for now I feel tables are the easier solution especially with my limited knowledge of CSS.

Thanks again for your help.

[ronaldb66]

You're very welcome.

Nonetheless, I'd still like to recommend diving into CSS. It isn't necessary to go from a full table layout to a completely table-less layout in one go: especially reducing the depth of multiply nested table structures goes a long way in making your page render faster and smoother.

Aim at abolishing layout table use for page sections that sit on top of eachother (vertical stack): all HTML block level elements do this by nature. Until you are more familiar with CSS, especially positioning, reserve layout table use for side-by-side (columnar) structures.