Tables vs. CSS - Need advice

Discussion in 'HTML' started by Jens Lenge, Mar 5, 2005.

  1. Jens Lenge

    Jens Lenge Guest

    Hello world,

    I play around with a table based layout
    (http://www.photoss.de/test/layout-table.htm). It works perfectly with
    Firefox, but shows some problems with Internet Explorer 6 which are
    described on the webpage.

    First, I would like to make the layout work for both Firefox and IE6.

    Second, I have heard that CSS based layouts should be preferred over table
    based ones. I tried to create a CSS based layout that looks the same and
    behaves in the same way. I tried a number of approaches that I found on the
    web, but up to now I couldn't find a CSS solution that really look and
    behaves like the table.

    Maybe someone can give me some hints that push me in the right direction?

    Regards, Jens
     
    Jens Lenge, Mar 5, 2005
    #1
    1. Advertising

  2. Jens Lenge

    Big Bill Guest

    On Sat, 5 Mar 2005 05:32:37 +0100, "Jens Lenge" <>
    wrote:

    >Hello world,
    >
    >I play around with a table based layout
    >(http://www.photoss.de/test/layout-table.htm). It works perfectly with
    >Firefox, but shows some problems with Internet Explorer 6 which are
    >described on the webpage.
    >
    >First, I would like to make the layout work for both Firefox and IE6.
    >
    >Second, I have heard that CSS based layouts should be preferred over table
    >based ones. I tried to create a CSS based layout that looks the same and
    >behaves in the same way. I tried a number of approaches that I found on the
    >web, but up to now I couldn't find a CSS solution that really look and
    >behaves like the table.
    >
    >Maybe someone can give me some hints that push me in the right direction?
    >
    >Regards, Jens


    If you need the effect of a table, use a table. I think a lot of this
    has come about from people thinking you can use css to make a table.
    You can't, them's different animals. They behave different. So if you
    need something that walks like a table, talks like a table, etc., use
    a table.

    BB
    --
    www.kruse.co.uk/
    Affordable SEO!
    --
     
    Big Bill, Mar 5, 2005
    #2
    1. Advertising

  3. Jens Lenge

    mscir Guest

    Jens Lenge wrote:

    > Hello world,
    > I play around with a table based layout
    > (http://www.photoss.de/test/layout-table.htm). It works perfectly with
    > Firefox, but shows some problems with Internet Explorer 6 which are
    > described on the webpage.
    > First, I would like to make the layout work for both Firefox and IE6.
    > Second, I have heard that CSS based layouts should be preferred over
    > table based ones. I tried to create a CSS based layout that looks the
    > same and behaves in the same way. I tried a number of approaches that I
    > found on the web, but up to now I couldn't find a CSS solution that
    > really look and behaves like the table.
    > Maybe someone can give me some hints that push me in the right direction?
    > Regards, Jens


    How about something like this, it renders the same in my IE 6, Netscape
    7.2, Firefox 1.0.1:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Table Layout</title>
    <style type="text/css">
    body{
    background-color: #000000;
    padding: 0;
    margin: 0;
    border: 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 1em;
    width: 100%;
    }

    ..wrapper{
    margin: 0;
    padding: 0;
    border: 5px solid #000000;
    background-color: #CCCCCC;
    }
    ..left{
    float: left;
    background-color: #CCCCCC;
    width: 120px;
    padding: 5px;
    }
    ..top{
    margin: 0 0 0 130px;
    background-color: #999999;
    padding: 5px;
    text-align: right;
    }
    ..main{
    margin: 0 0 0 130px;
    background-color: #FFFFCC;
    padding: 5px;
    border-top: 5px solid #000000;
    border-right: 0px solid #000000;
    border-bottom: 5px solid #000000;
    border-left: 5px solid #000000;
    }
    ..bottom{
    margin: 0 0 0 130px;
    background-color: #999999;
    padding: 5px;
    text-align: right;
    }
    </style>
    </head>

    <body>

    <div class='wrapper'>
    <div class='left'>
    <b>LEFT:</b><br>
    This area goes from the top to the bottom of the main area with a
    fixed width of 120px.<br><br>
    Its height is automatically increased when its contents don't
    fit.<br><br>
    The height is also automatically increased or when the height of the
    MAIN area increases.
    </div><!-- left -->
    <div class='top'>
    <b>TOP:</b> Fixed height of 30px, increases if contents do not fit.
    </div><!-- top -->
    <div class='main'>
    <b>MAIN:</b><br>
    This area has a fixed width.
    The height increases when its contents do not fit.<br>
    The height is also automatically increased or when the height of
    the left area increases.<br>
    <br><b>Problems:</b><br><br>
    1. The layout works for Firefox, but not for Internet Explorer 6:<br>
    a) TOP and BOTTOM areas have too much height.<br>
    b) IE6 adjusts the TOP height according to how much content is in
    the LEFT area.<br>
    <br>2. I'd like to get the same layout with DIV and CSS formatting
    instead of a table.
    </div><!-- main -->
    <div class='bottom'>
    <b>BOTTOM:</b> Fixed height of 30px, increases if contents do not fit.
    </div><!-- bottom -->
    </div><!-- wrapper -->
    </body>
    </html>
     
    mscir, Mar 5, 2005
    #3
  4. in alt.html, Jens Lenge wrote:
    > Hello world,
    >
    > I play around with a table based layout
    > (http://www.photoss.de/test/layout-table.htm). It works perfectly with
    > Firefox, but shows some problems with Internet Explorer 6 which are
    > described on the webpage.


    I think this is easier to get working using CSS. It is impossible to do
    any fixed height/width using table. (of course, fixed widths are usually
    bad idea anyway.)

    > Second, I have heard that CSS based layouts should be preferred over table
    > based ones. I tried to create a CSS based layout that looks the same and
    > behaves in the same way. I tried a number of approaches that I found on the
    > web, but up to now I couldn't find a CSS solution that really look and
    > behaves like the table.


    CSS layouts whitout css-tables wont usually work as table layouts. But in
    this case, you don't want it to work like table.

    > Maybe someone can give me some hints that push me in the right direction?


    I don't know about mscirs thing (because there was no URL), but I have
    example:
    http://www.student.oulu.fi/~laurirai/www/css/examples/float2col.html

    Gougle groups using that url, and you see lots of discussion. This is
    frequently asked question.


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 5, 2005
    #4
    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. Peter Bassett
    Replies:
    3
    Views:
    930
    Augustus
    Aug 15, 2003
  2. Otuatail

    Tables within tables

    Otuatail, Jul 31, 2004, in forum: HTML
    Replies:
    7
    Views:
    497
  3. Asun Friere
    Replies:
    1
    Views:
    506
    Paul Boddie
    Aug 27, 2003
  4. Peter Hansen
    Replies:
    23
    Views:
    876
    Anton Vredegoor
    Sep 5, 2003
  5. Chris Brat
    Replies:
    5
    Views:
    697
    =?iso-8859-1?q?Luis_M._Gonz=E1lez?=
    Aug 22, 2006
Loading...

Share This Page