SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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 ), 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. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gary.straughan View Post
    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 ), 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?
    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. #4
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    Solutions?
    Give the first column a specific width
    Rewrite the HTML
    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. #5
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    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. #6
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Glad you found a way forward!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •