SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paul's css layout demos: still valid?

    I wonder if the 3 and 2 column demos by paul are still valid. I don't see any mention of ie 7 testing for example and those demos are some years old. Is it safe to use those layouts today?

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You could always try viewing them with IE7 to see what happens...


    As a former scientist, I always advocate doing the experiment and observing the results.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    As a former scientist, I always advocate doing the experiment and observing the results.


    Yes as Ben said most of the layouts have no problems in IE7 and I have fixed most of the ones that had minor issues.

    IE7 fixed height but did not implement display:table so any layouts that use display:table to over-rule the 100% height will fail in ie7. I have some demos araund using display:table but they aren't linked to from the main 3 col demo so you shouldn't run into them unless you catch them in an old thread somewhere.

    As Ben said the main demos are really quite simple and use few hacks and are still pretty robust although if I had time I may use slightly different methods these days.

    This one is the most advanced of the demos:

    http://www.pmob.co.uk/temp/3col/3col-abs4.htm

    It works in Ie7 without problem and doesn't need images for any of the column colours but in consequence is a little more complicated than other methods.

    Things to watch out for in IE7 are when 100% height has been done like this:

    Code:
    html,body{height:100%}
    
    #outer{
    height:100%;
    min-height:100%;
    background:red;
    }
    html>body #outer{height:auto}/* not ie6- */
    The above doesn't work properly in ie7 unless you re-define min-height again.

    Code:
    html>body #outer{height:auto; min-height:100%;}
    Or use * html to target ie6 only.

    Code:
    html,body{height:100%}
    
    #outer{
    min-height:100%;
    background:red;
    }
     * html #outer{height:100%}/*  ie6- */


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
  •