SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Murfreesboro, TN
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Help! Table/CSS hybrid problem

    I am trying to build a hybrid table/css site, and trying to make it as simple structurally as possible (a la DWWS). However, I am unable to get the tables cel's width to remain consistent. The main cel width in 'table2' collapses somewhat whenever I add the graphic AND padding via css to the sidebar column, which makes it inconsistent from 'table1'. Also, the tables overall are different widths, and the text in table2_main is not valign'ing at the top either.

    I am pulling my hair out because I *thought* this would be a no-brainer issue. Am I missing something obvious?

    Any help would be appreciated. Here is a link to the test page, and below is the code:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    #table1_main {
    	padding-left: 10px;
    	border: 1px solid #CC0000;
    }
    #table1_sidebar {
    	padding: 0 10px 0 10px;
    	border: 1px solid #CC0000;
    }
    
    #table2_main {
    	padding-left: 10px;
    	border: 1px solid #CC0000;
    }
    #table2_sidebar {
    	padding: 0 10px 0 10px;
    	border: 1px solid #CC0000;
    }
    -->
    </style>
    </head>
    
    <body>
    
    <table width="750" border="0" align="center" cellpadding="0" cellspacing="0" id="table1">
      <tr>
        <td width="530" align="left" valign="top" id="table1_main"><img src="images/arrow_down_over.gif" width="520" height="32" alt="image"></td>
        <td width="220" align="left" valign="top" id="table1_sidebar"><img src="images/arrow_down_over.gif" width="200" height="32" alt="image"></td>
      </tr>
    </table>
    
    <table width="750" border="0" align="center" cellpadding="0" cellspacing="0" id="table2">
      <tr>
        <td width="530" align="left" valign="top" id="table2_main"><p>&nbsp;</p>
          <p>Text Here </p></td>
        <td width="220" align="left" valign="top" id="table2_sidebar"><img src="images/arrow_down_over.gif" width="200" height="32" alt="image"></td>
      </tr>
    </table>
    
    </body>
    </html>
    I realize I could make it one table, not use tables at all, etc -- but should this not work? It doesn't seem to be a browser issue, because it's (not) working the same on almost every browser.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I usually steer away from tables because of the same problems as tables are designed to accomodate content. The usual fix is a spacer gif to hold the cell open.

    However if you are going to define the cell widths then I think this css will work
    Code:
    table {table-layout:fixed}
    If not, perhaps a table expert will answer

    Also note that as you are adding padding and borders you are also changing the widths so be careful with your dimensions.

    Paul


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
  •