newbie: problem with table cell size

Discussion in 'HTML' started by Jeff, Jun 18, 2006.

  1. Jeff

    Jeff Guest

    Hey

    I'm creating a web page. I created the web page using a table ( the left
    column is for a menu, right column is for ad, the centre column is for site
    content)... The left and right column's width is set to be 200px... Before I
    added the <ul> block into the web page this really worked -> the left and
    right column's width was 200px when I tested it.. so far everything works...

    But my problem starts after I added the <ul> block. Now the left and right
    column take up almost the entire width of the table, the centre column
    becomes a little block in the centre of the table.

    I want to use this <ul> block and the width of left/right column to be
    200px...

    What am I doing wrong here?

    Here is my code (the files are separated with "***************"):
    index.php
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>TEST</title>
    <link href='css/general.css' rel='stylesheet' type='text/css' />
    <link href='css/menu.css' rel='stylesheet' type='text/css' />
    </head>

    <body>
    <table width="100%" border="1">
    <tr>
    <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3">
    <ul id="top_menu">
    <li><a href="">TEST 1</a></li>
    <li class="first"><a href="">TEST 2</a></li>
    <li><a href="">TEST 3</a></li>
    <li><a href="">TEST 4</a></li>
    <li><a href="">TEST 5</a></li>
    <li><a href="">TEST 6</a></li>
    <li><a href="">TEST 7</a></li>
    <li><a href="">TEST 8</a></li>
    </ul>
    </td>
    </tr>
    <tr>
    <td width="200">
    <table width="100%" border="1">
    <tr>
    <td>TEST A</td>
    </tr>
    <tr>
    <td>TEST B</td>
    </tr>
    <tr>
    <td>TEST C</td>
    </tr>
    </table>
    </td>
    <td>A</td>
    <td width="200">B</td>
    </tr>
    <tr>
    <td colspan="3">C</td>
    </tr>
    </table>



    </body>
    </html>

    ***************
    general.css
    body {
    background-color:#99CCCC;
    }

    a:link {
    text-decoration:none;
    }
    ***************
    menu.css
    ul#top_menu, ul#top_menu li {
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    }

    /* ul#top_menu {
    background-color:#00FFCC;
    }*/


    ul#top_menu li a {
    border-color:#0099FF;
    list-style:none;
    border-width:1px 1px 1px 0;
    border-style:solid;
    display:block;
    padding:3px;
    }

    ul#top_menu li.first a {
    border-color:#0099FF;
    background-color:#CCCC00;
    list-style:none;
    border-width:1px 1px 1px 0;
    border-style:solid;
    display:block;
    padding:3px;
    }
     
    Jeff, Jun 18, 2006
    #1
    1. Advertisements

  2. Jeff

    Sid Ismail Guest

    On Sun, 18 Jun 2006 20:25:06 +0200, "Jeff"

    : Hey
    :
    : I'm creating a web page. I created the web page using a table ( the left
    : column is for a menu, right column is for ad, the centre column is for site
    : content)... The left and right column's width is set to be 200px... Before I
    : added the <ul> block into the web page this really worked -> the left and
    : right column's width was 200px when I tested it.. so far everything works...
    :
    : But my problem starts after I added the <ul> block. Now the left and right
    : column take up almost the entire width of the table, the centre column
    : becomes a little block in the centre of the table.
    :
    : I want to use this <ul> block and the width of left/right column to be
    : 200px...
    :
    : What am I doing wrong here?
    :


    Try the CSS-alternative for a 3 column table?

    In the meantime, quick fix:
    ul {margin-left:-6px;}

    Sid
     
    Sid Ismail, Jun 18, 2006
    #2
    1. Advertisements

  3. Jeff

    Jeff Guest

    I tryed this code, it almost works, but the problem with this is that when
    the browser window resizes the left and right column also resizes. I want
    only the centre column to be resized when window resizes:
    ..left, .right {
    width:200px;
    }
    ..centre {
    width:80%;
    }
    <tr>
    <td class="left">A</td>
    <td class="centre">B</td>
    <td class="right">C</td>
    </tr>


    ul {margin-left:-6px;} isn't working....

    any suggestion?

    Jeff
     
    Jeff, Jun 18, 2006
    #3
  4. Jeff

    Sid Ismail Guest

    On Sun, 18 Jun 2006 22:16:53 +0200, "Jeff"

    :
    : ul {margin-left:-6px;} isn't working....
    :
    : any suggestion?


    Hi - ok, try:
    ul, li {margin-left:-6px;}


    Also, maybe post a url? That'll help! :)

    Sid
     
    Sid Ismail, Jun 19, 2006
    #4
  5. Jeff

    Jeff Guest

    Hey!

    this is the url
    http://home.online.no/~au-holme/pub/66505/index.php
    or
    http://home.online.no/~au-holme/pub/66505/index.html

    There you see that the centre column is very small, and the left and right
    column are very wide. I want those left and right column to be 200px wide

    general.css
    /* CSS Document */
    body {
    background-color:#FFFFFF;
    }

    a:link {
    text-decoration:none;
    }



    ***********************************************
    menu.css
    ul#top_menu, ul#top_menu li {
    list-style:none;
    float:left;
    /* margin:0;
    padding:0;*/
    }

    ul#top_menu {
    background-color:#FFFFFF;
    }


    ul#top_menu li a {
    border-color:#000000;
    color:#000000;
    list-style:none;
    border-width:1px 1px 1px 0;
    border-style:solid;
    display::block;
    padding:3px;
    }

    ul#top_menu li.first a {
    border-color:#0099FF;
    background-color:#CCCC00;
    list-style:none;
    border-width:1px 1px 1px 0;
    border-style:solid;
    display:block;
    padding:3px;
    }


    Any suggestions to what I should do to correct this?
     
    Jeff, Jun 19, 2006
    #5
  6. Jeff

    Sid Ismail Guest

    Sid Ismail, Jun 19, 2006
    #6
  7. Jeff

    Jeff Guest

    Jeff, Jun 19, 2006
    #7
  8. Jeff

    Neredbojias Guest

    To further the education of mankind, "Jeff"
    Did you try the page in Firefox? It seems to work there. Table behavior
    is notoriously broken in ie6 (-although you could try "quirks mode" which I
    suspect will work "better".)
     
    Neredbojias, Jun 19, 2006
    #8
  9. Jeff

    Martin Jay Guest

    It works with an HTML 4.01 strict doctype, such as:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

    But it would probably break in IE versions prior to 6.

    I wouldn't bother with XHTML. Stick with HTML 4.01.
     
    Martin Jay, Jun 20, 2006
    #9
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.