#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    149
    Rep Power
    13

    Tables & CSS... Part 2 (Kinda)


    I seem to be having quite the time with Tables and CSS, specifically in regards to column alignment.
    My previous post was about whether it is possible to have different column widths for the same column in different rows.
    I have since given up on that endeavour, deciding instead to use CSS aligned DIV tags instead. :^/

    However, now I'm having a serious problem with setting the widths of two columns in a table using CSS. The table is quite simple. It's a single table with 5 rows that span two columns, and one row that contains the two columns.
    The problem is that I want the width of the first column to be 150px with no padding in the cell at all. The column next to is should take up the remainder of the space of the row and have 20px padding on the left and right sides of the cell.

    While I'd assume this would be an easy task, it appears that it's not to be. Instead, the first column ends up being a VERY large size if there is nothing (ie: text) in the column, and comes out VERY strange when there is something in it.

    The code is below:

    PHP Code:
    <html>
      <
    body style="margin-top:0px;
                            margin-left:0px;
                            margin-right:0px;
                            margin-bottom:0px;
                        background-color:#FFFFFF;
                            text-align:center;
                            vertical-align:top;"
    >
        <
    table style="border-collapse: collapse;
                              margin-left:auto;
                              margin-right:auto;
                              width: 750px;
                              height:100%;
                              border-left:#000000 1px solid;
                              border-right:#000000 1px solid;"
    >
          <
    tr>
            <
    td colspan="2" style="width:100%;
               height:200px;
               border-bottom:#000000 1px solid;
               padding-top:0px;
               padding-bottom:0px;
               padding-left:0px;
                 padding-right:0px;"
    >&nbsp;</td>
          </
    tr>
          <
    tr>
            <
    td colspan="2" style="width:100%;
               height:26px;
               background-color:#FF0000;
               border-bottom:#000000 1px solid;
               text-align:right;
               padding-top:0px;
               padding-bottom:0px;
                  padding-right:7px;"
    >&nbsp;</td>
          </
    tr>
          <
    tr>
            <
    td colspan="2" style="width:100%;
               background-color:#FFFF00;
               height:15px;
               padding-left:0px;
               padding-top:0px;
               padding-right:0px;
                padding-bottom:0px;"
    >&nbsp;</td>
          </
    tr>
          <
    tr>
            <
    td colspan="2" style="width:100%;
               border-top:#0000FF 1px solid;
               border-bottom:#0000FF 1px solid;
               background-color:#00FF00;
               height:40px;
               padding-left:15px;
               padding-top:10px;
               padding-right:10px;
               padding-bottom:10px;"
    >
              &
    nbsp;
            </
    td>
          </
    tr>
          <
    tr>
            <
    td style="width:150px;
                              background-color:#0000FF;
                              vertical-align:top;
                              text-align:center;
                              border-right:#000000 1px solid;
                                border-bottom:#000000 1px solid;
                              padding-left:0px;
                              padding-top:0px;
                              padding-right:0px;
                              padding-bottom:0px;"
    >
              
    Something01
            
    </td>
            <
    td style="background-color:#00FFFF;
               vertical-align:top;
               border-bottom:#000000 1px solid;
               padding-left:20px;
               padding-top:0px;
               padding-right:20px;
               padding-bottom:0px;"
    >
              
    Something02
            
    </td>
          </
    tr>
          <
    tr style="background-color:#FFFFFF; height:24px;">
            <
    td colspan="2" style="width:100%;">
              &
    nbsp;          
            </
    td>
          </
    tr>
        </
    table>
      </
    body>
    </
    html
    Each cell is colored to help identify each one.

    Is there something blatently obvious that I'm missing or is this a REALLY bad bug that just *happens* to affect Mozilla (Firebird 0.61) AND Internet Explorer 6.0?

    Any help is MUCH appreciated. :^)

    - coredumped.
    Last edited by coredumped; February 5th, 2004 at 04:29 AM.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Remove the width rule from the 2 column <td>s.
    Code:
    <html>
      <head>
      </head>
    
      <body  style="margin: 0px;
                    background-color:#FFFFFF;
                    text-align:center;
                    height: 100%;">
    
        <table style="border-collapse: collapse;
                      margin-left:auto;
                      margin-right:auto;
                      width: 750px;
                      height:100%;
                      border-left:#000000 1px solid;
                      border-right:#000000 1px solid;">
          
          <tr>
            <td colspan="2"
              style="height: 200px;
    	         border-bottom: #000000 1px solid;
    	         padding: 0px;">
    
            &nbsp;</td>
          </tr>
    
          <tr>
            <td colspan="2"
            style="height:26px;
    	  background-color:#FF0000;
    	  border-bottom:#000000 1px solid;
    	  text-align:right;
    	  padding: 0px;
    	  padding-right: 7px;">
            &nbsp;</td>
          </tr>
    
          <tr>
            <td colspan="2"
            style="background-color:#FFFF00;
    	  height: 15px;
    	  padding-left: 0px;">
            &nbsp;</td>
          </tr>
    
          <tr>
            <td colspan="2"
            style="border-top:#0000FF 1px solid;
    	  border-bottom:#0000FF 1px solid;
    	  background-color:#00FF00;
    	  height:40px;
    	  padding-left:15px;
    	  padding-top:10px;
    	  padding-right:10px;
    	  padding-bottom:10px;"> 
            &nbsp;</td>
          </tr>
    
          <tr>
            <td
            style="width:150px;
    	  background-color:#0000FF;
    	  vertical-align:top;
    	  text-align:center;
    	  border-right:#000000 1px solid;
    	  border-bottom:#000000 1px solid;
    	  padding: 0px;">
            Something01</td>
    
            <td
            style="background-color:#00FFFF;
    	  vertical-align:top;
    	  border-bottom:#000000 1px solid;
    	  padding: 0px 20px 0px;">
    	  
            Something02</td>
          </tr>
    
          <tr style="background-color:#FFFFFF; height:24px;">
            <td colspan="2">&nbsp;</td>
          </tr>
        </table>
      </body>
    </html>
    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    149
    Rep Power
    13

    Part 3???


    Thanks for the help kk5st, but it seems as though there's a new problem and it's ONLY to do with Internet Explorer.

    In one of the rows (second to be exact), I want to use it as a menubar. So, I put in a series of <a> tags with <img>'s, all right-justified (as set in the style for that row).
    In Mozilla, it works fine, the column that should be 150px, stays 150px wide (actually, I measured it out to be 151, but I won't sweat over 1 pixel.
    In IE6, however, the column widens to a grotesque 416PX!!!!

    Here's the updated code:

    PHP Code:
    <html>
      <
    body style="margin-top:0px;
                            margin-left:0px;
                            margin-right:0px;
                            margin-bottom:0px;
                             background-color:#F8F8F8;
                            text-align:center;
                            vertical-align:top;"
    >
      
        <
    table border="1" style="border-collapse: collapse;
               margin-left:auto;
               margin-right:auto;
               width: 750px;
               height:100%;
               border-left:#000000 1px solid;
               border-right:#000000 1px solid;"
    >
          
          <
    tr>
            <
    td colspan="2" style="height:200px;
               border-bottom:#000000 1px solid;
               padding-top:0px;
               padding-bottom:0px;
               padding-left:0px;
                  padding-right:0px;"
    >&nbsp;</td>
          </
    tr>
          
          <
    tr>
            <
    td colspan="2" style="background-image:url(menubar02.png);
               background-repeat:repeat-x;
               height:26px;
               background-color:#E8D384;
               border-bottom:#000000 1px solid;
               text-align:right;
               padding-top:0px;
               padding-bottom:0px;
               padding-right:7px;"
    >

              <
    A HREF="section01.html"><IMG SRC="menu_section01.png" BORDER="0"></a>
              <
    A HREF="section02.php"><IMG SRC="menu_section02.png" BORDER="0"></a>
              <
    A HREF="section03.html"><IMG SRC="menu_section03.png" BORDER="0"></a>
              <
    A HREF="section04.html"><IMG SRC="menu_section04.png" BORDER="0"></a>
              <
    A HREF="section05.html"><IMG SRC="menu_section05.png" BORDER="0"></a>
              <
    A HREF="section06.html"><IMG SRC="menu_section06.png" BORDER="0"></a>
              
            </
    td>
          </
    tr>
          
          <
    tr>
            <
    td colspan="2" style="background-color:#FFFFFF;
                  background-image:url(txtbg02.png);
               background-repeat:repeat-x;
               height:15px;
               padding-left:0px;
               padding-top:0px;
               padding-right:0px;
                 padding-bottom:0px;"
    >&nbsp;</td>
          </
    tr>

          <
    tr>
            <
    td colspan="2" style="border-top:#0000FF 1px solid;
               border-bottom:#0000FF 1px solid;
               background-color:#FFFFFF;
               height:40px;
               padding-left:15px;
               padding-top:10px;
               padding-right:10px;
               padding-bottom:10px;"
    >
    &
    nbsp;
            </
    td>
          </
    tr>
          
          <
    tr>
            <
    td style="width:150px;
                             background-color:#FFFFFF;
                         background-image:url(footer01.png);
                        background-repeat:repeat-x;
                             background-position:50% 100%;
                              vertical-align:top;
                              text-align:center;
                              border-right:#000000 1px solid;
                               border-bottom:#000000 1px solid;
                             padding-left:0px;
                             padding-top:0px;
                             padding-right:0px;
                             padding-bottom:0px;"
    >
              
    Something01<br>
            </
    td>
            <
    td style="background-color:#FFFFFF;
             background-image:url(footer01.png);
               background-repeat:repeat-x;
               background-position:50% 100%;
               vertical-align:top;
               border-bottom:#000000 1px solid;
               padding-left:20px;
               padding-top:0px;
               padding-right:20px;
               padding-bottom:0px;"
    >
              
    Something02
            
    </td>
          </
    tr>
          
          <
    tr style="background-color:#587A9B; height:24px;">
            <
    td colspan="2">
            &
    nbsp;      
            </
    td>
          </
    tr>
        </
    table>
            
      </
    body>
    </
    html
    Any thoughts as to why this is happening and what to do to remedy it?

    Thanks!

    - coredumped.
    Last edited by coredumped; February 5th, 2004 at 04:35 AM.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I'll take a look at it. Since I don't have your images, what are their sizes? Your code should include size on all foreground images&mdash;it helps the browser compute the layout.

    BTW, your code stretches out to about 2500 pixels wide. That is a real PITA to read. Compare to the code I posted. I've already pasted into an editor and started reformatting, but you might consider your format before posting more code&mdash;it doesn't have to be all on one line.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    149
    Rep Power
    13

    Image Sizes


    Each image in the menubar is 70x25 pixels. 6 Images for a total width of 420px. Not exactly the same number, but close. Coincidence?

    Thanks for the note about posting code, I'll be careful in the future. :^)

    UPDATE: I tried removing the images from the menubar and replace them with text for the links, and the column width STILL remains at 416 pixels wide.
    HOWEVER, removing the <a> link tags and leaving plain text seems to keep the column at 150px.

    - coredumped.
    Last edited by coredumped; February 4th, 2004 at 05:17 PM.
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    This example should be what you want. I made some changes for structure's sake. Some style rules were added to support the changes. The code is validated.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    149
    Rep Power
    13

    Frustrated!


    Gary, thanks for all your help thus far, but unfortunately it seems as though trying to cater to the 'imperfections' of Internet Explorer is only causing more problems than what it's worth.

    All the code I have had up until now has been HTML with CSS. The expectation was that once CSS was properly functioning in HTML, I would implement the page as XHTML for production and make whatever debugging changes necessary at that time. Perhaps that was a wrong course of action, but I was happy to see that you had implemented it in the example link your provided.

    Unfortunately, this raised several more issues, primarily with Internet Explorer. At first, I became discouraged after seeing that the table was no longer stretching to the length of the browser viewing area. I was able to overcome this problem by setting a style for both the <html> and <body> tags, setting their height to 100%. But this is when other problems began to arise.

    Under Mozilla, the page seemed to render almost perfectly, but MSIE (as expected), failed miserably.

    Internet Explorer seems to disregard row height formatting COMPLETELY when rendered as an XHTML page.

    To be honest, I had a working format with HTML & CSS previously, which placed the two columns in the design we have been fooling around with... as a nested table. It seemed to work. I, however, merely wanted to implement 'proper' web scripting and design by eliminating the use of nested tables, and use XHTML as opposed to HTML. However, as we've discovered, it's hard to try and follow 'proper' and 'accepted' web design and coding standards, when the browsers themselves do not 'proper'ly implement those very standards (most notably MSIE).

    Sorry for the rant, I'm just VERY frustrated that we have to resort to such measures and frustrations because of someone's inability or ignorance of accepted standards. :^/

    Something I noticed about the example link you provided was that the links in the menubar are being displayed in reverse order in both Internet Explorer AND Mozilla. I'm curious as to why this might be happening. Furthermore, I'm a little confused as to why it's implemented in this way. Can you shed some light on this?

    Anyways, here is the latest code, if anyone wants to tackle it:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html style="height:100%;" xmlns="http://www.w3.org/1999/xhtml">
      <
    head>
        <
    meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>

    <
    style type="text/css">
    /*<![CDATA[*/

    td {
        
    border-bottom1px solid blue;
        }

    ul#menu {
        
    displayinline;
        list-
    stylenone;
        }

    ul#menu li {
        
    floatright;
        
    width70px;
        
    border1px solid black;
        }

    li a {
        
    text-decorationnone;
        
    displayblock;
        }

    a img{
        
    bordernone;
        }

        
    /*]]>*/
    </style>

        <
    title>problem table</title>
      </
    head>

      <
    body style="height:100%;
                   margin-top:0px;
                   margin-left:0px;
                   margin-right:0px;
                   margin-bottom:0px;
                   background-color:#F8F8F8;
                   text-align:center;"
    >

        <
    table border="1" style="border-collapse: collapse;
                                 margin-left:auto;
                                 margin-right:auto;
                                 width: 750px;
                                 height:100%;
                                 border-left:#000000 1px solid;
                                 border-right:#000000 1px solid;"

                                 
          <
    tr style="height:200px;">
            <
    td colspan="2" style="border-bottom:#000000 1px solid;
                               padding: 0px;
                               background-image:url(header03.png);
                               background-repeat:no-repeat;"

              &
    nbsp;
            </
    td>
          </
    tr>

          <
    tr style="height:26px;">
            <
    td colspan="2" style="background-image:url(menubar02.png);
                               background-repeat:repeat-x;
                               background-color:#E8D384;
                                   border-bottom:#000000 1px solid;
                               vertical-align: middle;
                                   padding-right:7px;"
    >
              
          <
    ul id="menu">
            <
    li><a href="section01.html"><img src="menu_about01.png"
              
    height="25" width="70" alt="link1" /></a></li>

            <
    li><a href="section02.php"><img src="menu_news01.png"
                  
    height="25" width="70" alt="link2" /></a></li>

            <
    li><a href="section03.html"><img src="menu_services01.png"
                  
    height="25" width="70" alt="link3" /></a></li>

            <
    li><a href="section04.html"><img src="menu_ethics01.png"
                  
    height="25" width="70" alt="link4" /></a></li>

            <
    li><a href="section05.html"><img src="menu_links01.png"
                  
    height="25" width="70" alt="link5" /></a></li>

            <
    li><a href="section06.html"><img src="menu_contact01.png"
                  
    height="25" width="70" alt="link6" /></a></li>
          </
    ul>
            </
    td>
          </
    tr>

          <
    tr style="height:15px;">
            <
    td colspan="2"
            
    style="background-color:#FFFFFF;
          background-image:url(txtbg02.png);
          background-repeat:repeat-x;
          padding: 0px;"
    >
          &
    nbsp;
            </
    td>
          </
    tr>

          <
    tr style="height:40px;">
            <
    td colspan="2" style="border-top:#0000FF 1px solid;
                               border-bottom:#0000FF 1px solid;
                               background-color:#FFFFFF;
                               padding: 10px;
                               padding-left: 15px;
                               text-align:left;"
    >
              <
    img src="header_about02.png" />
            </
    td>
          </
    tr>

          <
    tr>
            <
    td style="width:150px;
                   background-color:#FFFFFF;
                   background-image:url(footer01.png);
                   background-repeat:repeat-x;
                   background-position:50% 100%;
                   vertical-align:top;
                   text-align:center;
                   border-right:#000000 1px solid;
                   border-bottom:#000000 1px solid;
                   padding: 0px;"
    >
          
    Something01
            
    </td>

            <
    td style="background-color:#FFFFFF;
                   background-image:url(footer01.png);
                   background-repeat:repeat-x;
                   background-position:50% 100%;
                   vertical-align:top;
                   text-align:left;
                   border-bottom: #000000 1px solid;
                   padding: 0px 20px;"
    >
              
    Something02
            
    </td>
          </
    tr>

          <
    tr style="background-color:#587A9B;
                 height:24px;"
    >
        <
    td colspan="2">
          
    FOOTER!
        </
    td>
          </
    tr>
        </
    table>
      </
    body>
    </
    html
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    As to table peculiarities, I'm as newbie as they come, since I only use them to display tables I also tend to allow for more elasticity in my designs, not trying for an exact layout. Basically, I code for Moz and then see what IE breaks, and fix it.

    The links were "backward," because they are floats. Instead of the group 123456 being aligned to the right, each is floated to the right in the order coded, 1 is sent to the right, then 2, 3, etc.. Thus, 654321.

    Floating the links allows for flexibility. Notice that the text to the left of the links is centered in its area. This is due to inheriting text-align:center from <body>. You could align left or right also.

    The links are in a list because structurally it is a list of links. I don't understand all the ins and outs of this vis a vis xml, etc., but it helpful to handicapped visitors using assistive technology&mdash;and that's good enough for me.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo