Table problem

Just thought I'd add, the above code looks fine on displays larger than 800x600....but I need it to work with this size too...

Thanks

What happens if you take out the width=100% in the second td in the second row?

Then on some pages, the navigation is no longer 180 wide...

a width of 566 is ok, but 567 makes the scrollbar appear....

Don't forget there are also 30 or so pixels for the edges of the browser and vertical scroll bar, plus your table border of "1" is really another 8 or so pixels, plus the margins which are about 20 pixels, plus table cell padding and cell spacing.

I believe your problem is in this section:
<tr>
    <td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
    <td width="100%" height="100%">&nbsp;</td>
  </tr>


Remove the 100% on the td in that section.
That do it?

@snoyes_jw: Yep, but no problem there, as the image leaves 100px spare for this. Also, in im last comment, even an image of 567px wide gives the same problem :(

@rhawk: Although it is logical that this should be removed, it creates another problem! If I remove the 100% from there, the navigation occasionally ignores its 180 fixed width :( (Depends on the content in the adjoining cell).

Also, I have tried adding a fixed width to this cell, instead of a "100%" but this causes problems in larger displays (content no longer fills te entire width, instead whitespace is added to the rhs of cell)

I know of the issue. I never use he width to stretch a sell. Use a transparent gif (save a single pixel as one) and then set the image width to 180 and the height to 1. THe image is very small and works well for spacing. Does that solve the issue? I have had the issue you have int he past but the removal of all widths and use of the gif solved 99% of my issues.

im already using a transparent gif, hence the <img src="images/spacer.gif" width="180" height="1">

sorry i didn't mention it before...

However, if i remove all the widths, the width of my navigation cell seems to change on every page, depending on the content of the rhs cell. This is unfortunately unacceptable. The navigation MUST be 180px wide :( I need a completely consistent site.

Points increased by 100

<table width="100%" height="100%" border="1">
 <tr>
   <td colspan="2"><div align="center"><img src="images/logo.jpg" width="700" height="105"></div></td>
 </tr>
 <tr>
   <td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
   <td width="100%" height="100%">&nbsp;</td>
 </tr>
 <tr>
   <td colspan="2">&nbsp;</td>
 </tr>
</table>

Several things not right with this:

1. Specify the table's cellpadding and cellspacing attributes, since there may be a default value assumed by certain browsers, and if so, you're not allowing for it when your spacer GIF is the same width as the cell. remember to allow for the borders when figuring absolute width values, too.

2. Get rid of the "100%" values in your cells, you shouldn't mix percentages and absolute values, you're asking for trouble, and I'm sure it's not W3C compliant (or whatever).

Suggestion:
The Table width should be specified absolutely if you're doing that in a cell... So if you want your table to span 100% the width of the page, use nested tables with absolute width values...

whoops, didn't mean to re-post the table code. sorry bout that

Thanks for comments...

I've just had a go at using nested tables, and removing the 100% width tags, but still can't get it to work :(

Given the requirements of my site, is it possible for someone post the code here that will work? (all the time, not just most of the time!)

1) The page must span the entire 100% width of the screen (and not more than 100%, ie NO horizontal scrollbars! ever!)
2) The navigation cell must always be fixed at 180px EXACTLY!
3) The main content cell must always span the entire remaining width of the page

<---------------------------- 100% of page --------------------->
:                        logo here (700px)                                   :
<-- 180px --><-------------- 100% minus the 180px --------->
:  navigation  :                         main content                     :
:  goes          :                               goes                          :
:  here          :                               here                           :
<----------------------------- 100% of page -------------------->
:                                    footer here                                :
---------------------------------------------------------------------


I realise that HTML only "suggests" the layout to the browser, but there must be a way of doing this somehow!

Hi,
  If you are only going to have 2 columns in the entire table, all you need to do is the following:
<table width="100%" height="100%" border="1" cols="2">
  <tr>
    <td colspan="2"><div align="center"><img src="collageimage.jpg" width="700"

height="105"></div></td>
  </tr>
  <tr>
    <td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
    <td width="100%" height="100%">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>

The only difference is I have added cols=2 in the table ...have checked it on IE6.0 and Opera7.1 and it appears fine. Hope this helps. Let me know if you can have more than 2 columns, seeing from the layout you provided I assumed you will have 2 cols only.

Have you tried using CSS? Tables are not really made to handle layout on pages...

Something like this should work:


<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

      <title> Test XHTML & CSS2 layout </title>

      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

      <meta http-equiv="expires" content="-1" />
      <meta http-equiv="PRAGMA" content="NO-CACHE" />

      <meta name="Author" content="Maarten De Ridder" />

      <link rev="made" href="mailto:prohacx@hotmail.com" />


      <style type="text/css">

      body {
            position: absolute;
            text-align: center;  /* not possible to get messages aligned in NN with this! */
            margin: 0px;
            padding: 0px;
            border: 0px;
            width: 100%;
            height: 100%;
/*            overflow: auto; */
            font-family: Verdana, Tahoma, Arial;
            overflow: hidden;
      }

      .pageTitle { /* understood by IE and NN, but last understood one will be used */
            display: block;  /* inline/block does not matter here */
            position: relative;
/*            width: 100%; */
            height: 9%;
            background-color: #000066;
            text-align: center;
            font-family: Verdana, Tahoma, Arial;
            font-size: 20px;
            font-style: italic;
            color: red;
      }

      .pageSpacer {
            display: block;
            position: relative;
            clear: both;
            height: 2px;
            font-size: 1px;
            line-height: 3px;
            border: 0px;
            margin: 0px 0px 1px 0px;
            padding: 0px;
            background-color: #ffffff;
            border-bottom: 1px dotted #dddddd;
      }

      .pageBody {
            display: block;
            position: relative;
            float: left;
            width: 100%;
            height: 80%;
      }

      .pageMenu {
            display: inline;
            position: relative;
            float: left;
            width: 180px; /*25%*/
            height: 100%;
            background-color: #dddddd;
            font-family: arial, courier;
            font-size: 12px;
            font-weight: bold;
            text-align: left;
            color: #3D3D66;
      }

      .pageMenuItems {
/*            border: 1px solid blue;  */
            padding: 2px;
            margin: 70px 10px 10px 10px;
      }

      .pageMenu a {
            display: block;
            position: relative;
            width: 130px;
            border-top: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            border-left: 3px solid #dddddd;
            padding: 3px 10px 3px 10px;
            color: #3D3D66;
            text-decoration: none;
            background-color: #dddddd;
      }

      .pageMenu a:link {
            display: block;
            position: relative;
            width: 130px;
            border-top: 1px solid transparent;
            border-right: 1px solid transparent;
            border-bottom: 1px solid transparent;
            border-left: 3px solid transparent;
            padding-left: 10px;
            color: #3D3D66;
            text-decoration: none;
            background-color: #dddddd;
      }

      .pageMenu a:visited {
            color: #3D3D66;
      }

      .pageMenu a:hover {
            color: #ff5500;
            border-top: 1px solid #ff5500;
            border-right: 1px solid #ff5500;
            border-bottom: 1px solid #ff5500;
            border-left: 3px solid #ff5500;
      }

      .pageMenu a:active {
            color: #ff5500;
      }

      .pageContent {
            display: inline;
            position: relative;
            float: left;
            width: auto;  /* 82% */
            color: #606060;
            height: 100%;
      }

      .pageContentHeader {
            background-color: #dddddd;
            border: 1px solid #dddddd;
      }

      .pageContentHeaderText {
            display: inline;
            position: relative;
            float: left;
            width: 50%;
            text-align: left;
            font-size: 30px;
            background-color: #dddddd;
            color: #666666;
      }

      .pageContentHeaderImage {
            display: inline;
            position: relative;
            float: right;
            height: 65px;
      }

      .pageContentHeaderImage img {
            display: block;
            position: relative;
      }

      .pageContentBody {
/*            display: inline;*/
            position: relative;
            background-color: #ffffff;
            height: 78%;
            overflow: auto;
            clear: both;
      }

      .pageContentBodyTitle {
            display: block;
            position: relative;
            text-align: left;
            font-family: Verdana, Tahoma, Arial;
            font-size: 20px;
            color: #3D3D66;
            padding: 10px 10px 30px 30px;
            clear: both;
      }

      .pageContentBodySection {
            display: block;
            position: relative;
            clear: both;
            float: right;
            width: 80%;
            border-left: 1px dotted #dddddd;
            padding: 5px;
      }

      .pageContentBodySectionTitle {
            display: block;
            position: relative;
            width: 100%;
            border-bottom: 2px solid #3D3D66;
            font-family: arial, verdana, tahoma, courier;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 2;
            text-transform: uppercase;
            color: #3D3D66;
            text-align: left;
      }

      .pageContentBodySectionText {
            display: block;
            position: relative;
            font-family: arial, verdana, tahoma, courier;
            font-size: 12px;
            color: #6B6BB3;
            text-align: left;
            padding: 5px 5px 5px 20px;
      }


      .pageFooter { /* understood by IE and NN, but last understood one will be used */
            display: block;  /* inline/block does not matter here */
            clear: both;
            position: relative;
/*            position: relative;*/
/*            width: 100%; */
            height: 9%;
            background-color: #000066;
            text-align: right;
            font-family: Verdana, Tahoma, Arial;
            font-size: 20px;
            font-style: italic;
            color: red;
      }

      .finisher {
            clear: both;
/*            width: 100%;*/
      }

      img {
            border: 0px;
      }

      .w3c {
            width: 100%;
            text-align: center;
            padding-top: 200px;
            bottom: 5px;
      }

      .w3c a:link {
            border: 0px;
      }

      .w3c a:hover {
            border: 0px;
      }

      </style>

</head>

<body>

      <div class="pageTitle">
            put your image here
      </div>

      <div class="pageSpacer">&nbsp;</div>

      <div class="pageBody">

            <div class="pageMenu">

                  <div class="finisher"></div>

                  <div class="pageMenuItems">

                        <a href="#">Home</a>
                        <a href="#">About us</a>
                        <a href="#">Products</a>
                        <a href="#">Services</a>
                        <a href="#">Technologies</a>
                        <a href="#">Support</a>

                  </div>

                  <div class="finisher"></div>
   
                  <p class="w3c">
<!--                    <a href="http://validator.w3.org/check/referer"><img
                          src="http://www.w3.org/Icons/valid-xhtml11"
                          alt="Valid XHTML 1.1!" height="31" width="88" /></a> -->
                  </p>

            </div>

            <div class="pageContent">

                  <div class="pageContentHeader">
                        
<!--                        <div class="finisher"></div> -->
                        <div class="pageContentHeaderText">Welcome to Nimble</div>
                        <div class="pageContentHeaderImage"><img src="images/framework/branchelectronics.gif" alt="Electronics" /></div>
                        <div class="pageContentHeaderImage"><img src="images/framework/branchequipment.gif" alt="Equipment" /></div>
                        <div class="pageContentHeaderImage"><img src="images/framework/branchmaskmaking.gif" alt="Mask making" /></div>
                        <div class="pageContentHeaderImage"><img src="images/framework/branchsemiconductor.gif" alt="Semiconductor" /></div>
                        <div class="finisher"></div>

                  </div>

                  <div class="finisher"></div>
            
                  <div class="pageContentBody">

                        <div class="pageContentBodyTitle">Events</div>

<!--                        <div class="finisher"></div> -->

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              European Mask Conference EMC<br />
                              January 13-15, 2003<br />
                              Sonthofen, Germany
                              </div>

                              <div class="pageContentBodySectionText">
                              A paper about using MaTISSe in a mask house has been presented.
                              You can download the paper or download the presentation.
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              AEC / APC 2003<br />
                              March 26-28, 2003<br />
                              World Trade Center, Grenoble, France
                              </div>

                              <div class="pageContentBodySectionText">
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              Advanced Semiconductor Manufacturing Conference (ASMC)<br />
                              March 31-April 1, 2003<br />
                              International Conference Center, Munich, Germany
                              </div>

                              <div class="pageContentBodySectionText">
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              SEMICON Europa<br />
                              April 1-3, 2003<br />
                              Munich Trade Fair Centre, Munich, Germany
                              </div>

                              <div class="pageContentBodySectionText">
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              SEMICON West<br />
                              July 14-18, 2003<br />
                              Moscone Center, San Francisco, CA
                              </div>

                              <div class="pageContentBodySectionText">
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              SPIE Photomask 2003<br />
                              September 9-12, 2003<br />
                              Monterey Conference Center, Monterey, CA
                              </div>

                              <div class="pageContentBodySectionText">
                              </div>

                        </div>

                        <div class="pageContentBodyTitle">News</div>

<!--                        <div class="finisher"></div> -->

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              dCp
                              </div>

                              <div class="pageContentBodySectionText">
                              dCp version 5.8.10 released
                              Ghent, April 27, 2003
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              eCp
                              </div>

                              <div class="pageContentBodySectionText">
                              Nimble announces eCp released
                              Ghent, March 30, 2003
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              Nimblesite
                              </div>

                              <div class="pageContentBodySectionText">
                              New NimbleSite Web is online
                              Brussels, December 20, 2002
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              eCp prototype
                              </div>

                              <div class="pageContentBodySectionText">
                              Nimble announces eCp functionnal prototype
                              Ghent, December 15, 2002
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              dCp
                              </div>

                              <div class="pageContentBodySectionText">
                              dCp version 5.8.5 released
                              Ghent, December 10, 2002
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              Infineon succes story
                              </div>

                              <div class="pageContentBodySectionText">
                              Infineon Mask House reaches 99% uptime with MaTISSe FT MES in November
                              Munich, December 1, 2002
                              </div>

                        </div>

                        <div class="pageContentBodySection">

                              <div class="pageContentBodySectionTitle">
                              dCp at Infineon
                              </div>

                              <div class="pageContentBodySectionText">
                              Acceptance and worldwide rollout started for dCp version 5.8.3 at Infineon
                              Munich, October 25, 2002
                              </div>

                        </div>

                         <div class="finisher"></div>

                  </div>

            </div>

      </div>

      <div class="pageSpacer">&nbsp;</div>

      <div class="pageFooter">
            the footer
      </div>

</body>
</html>

Or

    <td height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
    <td width="1500" height="100%">&nbsp;</td>
 
Take the width out of the first cell, and make the second one some silly huge number.  It will have to listen to the table width of 100% first, it'll also have to show the transparent gif, so that should sort it too.

Browsers have a hard time - as you've seen - when you start using the colspan attribute in some cases. In essence, the browser is adding the width of the first column (180) to the width of the image, creating the horizontal scrollbar...

The simplest workaround for this is just to use a secondary table:

<html>
<head>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" align="center"><img src="images/logo.jpg" width="700" height="105"></td>
  </tr>
  <tr>
    <td width="100%">
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td width="180"><img src="images/spacer.gif" width="180" height="1"></td>
        <td nowrap width="100%">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
</body>
</html>

try this:


<html>
<head>
      <title>Untitled</title>
</head>

<body>
your table:
<table width="100%" height="100%" border="1">
 <tr>
   <td colspan="2"><div align="center"><img src="images/logo.jpg" width="700" height="105"></div></td>
 </tr>
 <tr>
   <td width="180" height="100%"><img src="images/spacer.gif" width="180" height="1"></td>
   <td width="100%" height="100%">&nbsp;</td>
 </tr>
 <tr>
   <td colspan="2">&nbsp;</td>
 </tr>
</table>


my table:
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
      <tr>
            <td align="center" height="110" valign="middle"><img src="images/logo.jpg" width="700" height="105"></td>
      </tr>
      <tr>
            <td>
                  <table align="left" border="1" cellspacing="0" cellpadding="0">
                        <tr>
                              <td width="180" valign="top">nav goes here</td>
                              <td>content goes here -- this will increase in width to fill 100% of the page depending on content...</td>
                        </tr>
                  </table>
            </td>
      </tr>
      <tr>
            <td>&nbsp;</td>
      </tr>
</table>
</body>
</html>

Thanks pepsichris, your javascript works great! I'm all for cheating if it gets the job done...

I have tested ALL the other suggestions, but none work perfectly for for every resolution and/or content. (which is weird because the logic behind most of them is completely correct)