Page loading in a very "untidy" way (two column table layout)

HTML & CSS
1

I’m trying to fix a website (built by a third party) that loads in a rather strange way. It’s a two column layout (Yes, it uses a table for layout :frowning: ), and it loads like this:

  • The first column appears, taking out the whole width of the table
  • the second column appears, pushing the first column back into place

The effect is most pronounced in Safari, but it also happens (for uncached pages) with IE and Firefox.

The table is width 100%. The second column has a fixed width. The first column doesn’t have a specified width.

It was my understanding that the browsers handled tables in the following order…

  1. work out what’s in the table cells
  2. work our the width required
  3. display the table.

… but that doesn’t seem to be happening for this particular site.

Any thoughts on what’s going on? Possible solutions?

Many thanks in advance… Gary

PS The website is password protected, unfortunately. Otherwise I would have included a link to it.

2

Yesp, sounds like the browser can’t render the first column width immediately because it has no value, that might give the result you’re seeing.

Solutions?
Give the first column a specific width
Rewrite the HTML

3

What’s the HTML construction like? Is it all in a single file, is it pulling fragments from different files or is it writing it on-the-fly? If you could re-write a ‘lorem ipsum’ version that we could see, that might help.

4

You’re right: when a give the first column a width, the page loads cleanly. So fixing the width of the page is a possible solution. (It’s currently flexible.)

5

It’s a commercial product - customised by several people by the looks of things. Lots of includes, lots of Smarty.

Yes, I may have to stop being lazy and set up a couple of test pages!

6

Two possible approaches that occurred overnight:

  • Wondered what the effect would be of adding a small (light) row at the top of the table? (Would this help the browser to get the right answer faster.)
  • Could the width of column1 be calculated with a spot of JavaScript and “given” to column1?

If it was up to me, I’d have fixed the width of the site by now. But there’s a client involved!

G

7

FYI:

By default the table-layout is set to auto. It usually tends to be slow, since it has to read through the content before determining the final layout.

I prefer a fixed table-layout algorithm. This layout does not depend on the content and lays out faster than the former [auto]. After the first row is received, the browser can begin to display the table.

8

Thanks cooper.semantics (and others) : looks like the only quick fix for the current code is to move to a fixed layout.

Thanks one and all. Extremely helpful.

G

9

Glad you found a way forward!