CSS Tableless Layout Challenge > Going out to all Gurus !!!

Discussion in 'HTML' started by Silkster, Oct 27, 2006.

  1. Silkster

    Silkster Guest

    Hi Everyone... hope your all well..

    I was hoping somebody out there could help me out with this one..
    Iam not a CSS newbie but Iam working alone and struggling with a few
    css layout issues..
    Iam sure we have all been there...

    Right I am designing a site in XHTML Trans.
    I have been doing OK I but have some fundamental problems...

    I need the site to work in IE: 5/5.5/6/7 & Netscape 6/7/8 & Firefox
    1/1.5/2 & Opera 7/8/9 and Mozzila

    The layout needs to be mixed columns:

    Left Fixed (Left Align 150px)
    -------------------------------------------------------------------------------------------
    The Center gets complex (its fluid mixed)...
    Senario 1* 3 cols (Stretchy>right and left with a center fixed of
    20px) like this> []-[]
    also on the same page I have
    Senario 2* 5 cols (3xStrechy>right, left and center with 2 columns
    fixed at 20px) like this> []-[]-[]
    -------------------------------------------------------------------------------------------
    Right Fixed (Right Align 150px)



    Pages on the site vary in coplexity and layout but If I can nail this
    bit think I could get the rest covered.

    Anybody think Iam mad or just a touch ambitious
    here is a site that does the 1* senario <http://www.ebuyer.com/>
    cant find one the does the 2* senario or that mixes the 2 senarios...

    I have done OK so far and got it to work, but IE 5/5.5 box model probs
    is driving me nuts
    so I thik I need to go back to basics

    HOPE YA CAN HELP!!!
    Respect
    Silkster
    Silkster, Oct 27, 2006
    #1
    1. Advertising

  2. Silkster

    mbstevens Guest

    Silkster wrote:

    > Left Fixed (Left Align 150px)
    > -------------------------------------------------------------------------------------------
    > The Center gets complex (its fluid mixed)...
    > Senario 1* 3 cols (Stretchy>right and left with a center fixed of
    > 20px) like this> []-[]
    > also on the same page I have
    > Senario 2* 5 cols (3xStrechy>right, left and center with 2 columns
    > fixed at 20px) like this> []-[]-[]
    > -------------------------------------------------------------------------------------------
    > Right Fixed (Right Align 150px)


    3 column:

    http://www.glish.com/css/
    http://www.realworldstyle.com/

    5 column:

    Do 3 column, but use a container for the
    center column. Within that container do 3
    column again.
    --
    mbstevens
    http://www.mbstevens.com
    mbstevens, Oct 27, 2006
    #2
    1. Advertising

  3. Silkster

    Silkster Guest

    Doesnt work!!
    IE 5x has prob with they widths they dont stretch

    mbstevens wrote:
    > Silkster wrote:
    >
    > > Left Fixed (Left Align 150px)
    > > -------------------------------------------------------------------------------------------
    > > The Center gets complex (its fluid mixed)...
    > > Senario 1* 3 cols (Stretchy>right and left with a center fixed of
    > > 20px) like this> []-[]
    > > also on the same page I have
    > > Senario 2* 5 cols (3xStrechy>right, left and center with 2 columns
    > > fixed at 20px) like this> []-[]-[]
    > > -------------------------------------------------------------------------------------------
    > > Right Fixed (Right Align 150px)

    >
    > 3 column:
    >
    > http://www.glish.com/css/
    > http://www.realworldstyle.com/
    >
    > 5 column:
    >
    > Do 3 column, but use a container for the
    > center column. Within that container do 3
    > column again.
    > --
    > mbstevens
    > http://www.mbstevens.com
    Silkster, Oct 27, 2006
    #3
  4. Silkster

    mbstevens Guest

    Silkster wrote:
    > Doesnt work!!
    > IE 5x has prob with they widths they dont stretch


    Here's a tutorial with hacks for old browsers:

    http://www.thenoodleincident.com/tutorials/box_lesson/index.html

    Personally, I would never go over 3 columns.
    Visitors want different text and window
    sizes. Five columns is forcing things.
    And, I hate doing hacks.
    mbstevens, Oct 27, 2006
    #4
  5. Silkster

    Andy Dingley Guest

    Silkster wrote:

    > I need the site to work in IE: 5/5.5/6/7 & Netscape 6/7/8 & Firefox
    > 1/1.5/2 & Opera 7/8/9 and Mozzila


    Stop chasing pixel-perfect accuracy in IE5 Clueiron the management
    until they appreciate this.

    Anyone still using IE5 / Windows has already had their CC details
    lifted so often that they've no money left and so can't shop with you.
    Even M$oft accept that IE5/Mac is dead.
    Andy Dingley, Oct 27, 2006
    #5
  6. Silkster wrote:

    > Right I am designing a site in XHTML Trans.


    Why are you not using Strict? Transitional is for legacy documents.
    Switch to Strict and maybe your problems will go away...

    Oh, and you probably should not be using _X_html for all the reasons
    mentioned here frequently.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Oct 27, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ryan Stewart

    Centered boxes with tableless layout

    Ryan Stewart, Feb 21, 2004, in forum: HTML
    Replies:
    13
    Views:
    803
    Michael Jaeger
    Feb 23, 2004
  2. Huss
    Replies:
    8
    Views:
    397
    The Doormouse
    May 10, 2004
  3. Replies:
    1
    Views:
    564
    John Timney \(MVP\)
    Jun 19, 2006
  4. Ted

    Tableless layout

    Ted, Sep 4, 2006, in forum: HTML
    Replies:
    6
    Views:
    572
  5. Martin
    Replies:
    5
    Views:
    333
    Martin
    Apr 2, 2008
Loading...

Share This Page