Solved

Table problem

Posted on 2003-12-11
20
553 Views
Last Modified: 2010-04-09
In an 800x600 display, the logo.jpg in the code below causes my page to expand, making an unwanted horizonal scrollbar.

<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>

As the image is only 700 wide, I can't see this should be a problem, but it seems to be :( If i take the image out, or make it smaller, all looks fine. But it must stay 700 wide!

So......any ideas?
0
Comment
Question by:rjdown
  • 8
  • 3
  • 2
  • +5
20 Comments
 
LVL 6

Author Comment

by:rjdown
ID: 9922172
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
0
 
LVL 33

Expert Comment

by:snoyes_jw
ID: 9922377
What happens if you take out the width=100% in the second td in the second row?
0
 
LVL 6

Author Comment

by:rjdown
ID: 9922432
Then on some pages, the navigation is no longer 180 wide...
0
 
LVL 6

Author Comment

by:rjdown
ID: 9922656
a width of 566 is ok, but 567 makes the scrollbar appear....
0
 
LVL 33

Expert Comment

by:snoyes_jw
ID: 9923770
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.
0
 
LVL 2

Expert Comment

by:rhawk
ID: 9923960
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?
0
 
LVL 6

Author Comment

by:rjdown
ID: 9924367
@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)
0
 
LVL 2

Expert Comment

by:rhawk
ID: 9924575
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.
0
 
LVL 6

Author Comment

by:rjdown
ID: 9924777
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.
0
 
LVL 6

Author Comment

by:rjdown
ID: 9924793
Points increased by 100
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 18

Expert Comment

by:SquareHead
ID: 9925573
<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...
0
 
LVL 18

Expert Comment

by:SquareHead
ID: 9925575
whoops, didn't mean to re-post the table code. sorry bout that
0
 
LVL 6

Author Comment

by:rjdown
ID: 9925692
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!
0
 

Expert Comment

by:badprogrammer
ID: 9926452
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.
0
 
LVL 5

Expert Comment

by:prohacx
ID: 9927063
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>
0
 
LVL 9

Accepted Solution

by:
pepsichris earned 150 total points
ID: 9927704
A bit of a cheat as I can see your problem but can't get my head around why it doesn't work in a way that'd make sense.  Regardless, this works, so hope it helps.

  <table width="100%" border="1" cellspacing="1" cellpadding="1">
    <tr align="center">
      <td colspan="2"><img src="pic.gif" width="700" height="105"></td>
    </tr>
    <tr>
      <td width="178">&nbsp;</td>
            <script language="JavaScript">
            var docwidth
            if(window.innerWidth){
            docwidth = window.innerWidth
            }
            if(document.body.clientWidth){
            docwidth = document.body.clientWidth;
            }
            var cellwidth = (docwidth - 180);
            document.write("<td width = '" + cellwidth + "'>");
            </script>
         &nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
  </table>
0
 
LVL 9

Expert Comment

by:pepsichris
ID: 9927783
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9929002
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>
0
 
LVL 18

Expert Comment

by:SquareHead
ID: 9929231
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>
0
 
LVL 6

Author Comment

by:rjdown
ID: 9930427
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)
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now