WeetHet - HTML - Table trouble or How to fix the 100 percent problem?

Your IP address:

216.73.216.176

Print this page
- use Landscape

Search the
WeetHet Pages

WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
For excellent webhosting that is reliable and affordable, we highly recommend: LiquidWeb

On this page ...

When working with tables, or other objects that use a width parameter, you might encounter the 100%-problem.

What is the 100%-problem?

I have seen this problem on to occasions:

A Java Applet that should become 100% wide
A table with at least 1 column with an unknown width

Solution?

I wrote a little Javascript function to fix this problem.

What is the 100% problem?

I will describe two situations where you can encounter this problem.

First: A Java Applet should become 100% wide.

Normally I would set "width" to 100% as in this example:

Most browsers handle this pretty OK. However Internet Explorer hasn't got it's priorities straight. It first initializes the applets and then defines how many pixels equal 100%. The applet either becomes wrong sized or doesn't display at all and the only thing you can watch is a nice grey square ...

Second: A table has at least 1 column with an undefined with.

Imagine a table with 3 columns (this is what happens on this webpage as well!!).

The right and left column hold an image, a 100 pixels wide. The column may not become larger than a 100 pixels otherwise the pictures do not match the rest of the page. The middle column should resize depending on the page resolution.

One trick is to not enter a width-value for the left and right column. A second trick (which works fine with a 2 column table) is to set width to a 100%. Let's take a look at the HTML code:

<table width="100%">
<tr>
<td width="100"><image></td>
<td width="100%">blabla</td>
<td width="100"><image></td>
</tr>
</table>

Too bad, too sad,... in particular browsers (Netscape being one of them) you do not get what you want.

The width of the left and right column (depending on the screen resolution and page width) are nog longer a 100 pixels wide.

The Solution

I have written a little JavaScript function that works for most known browser (tested it with Internet Explorer, Netscape, Opera and NetCaptor). This script ("getwidth") returns the width of the page in pixels. The parameter is substracted from the total amount of pixels. This way you can reuse this function for multiple purpose on a single page.

So let's say a page is 600 pixels wide. Calling "getwidth(0)" results in the answer of 600 pixels. Calling "getwidth(200)" results 400 pixels.

<script language="JavaScript">
  function getwidth(x)
  {
  // this script fixes some clientwidth bugs for the menu to be fullsize
  // Free to use by anyone if this header remains in position
  // (C)2000 Hans Luyten
  
  clientwidth=2000;

  if (self.innerWidth)
     {
     if (navigator.appName.indexOf('etscape')!=-1)
        {
        clientWidth = self.innerWidth-17;
        }
        else
        clientWidth = self.innerWidth; 
     }
     else if (document.body)
     {
        clientWidth = document.body.clientWidth;
     }

  returnwidth=clientWidth-x;

  return returnwidth;
  }
</script>

How to use this code?

First of all copy the script, between the </head> and the <body> tags.

In your HTML code, replace all "100%" widths, with "&{getwidth(X)};". Where "X" equals the sum of the left and right column's width in the second example, or "X" equals zero for the first example.

Let's see the previous two examples altered to use the script.

Java Applet example:

We want to use the full width of the document, so X=0.

Table example:

We want to know the total width of the page, minus the two 100-pixel-columns, so X=200.

<table width="100%">
<tr>
<td width="100"><image></td>
<td width="&{getwidth(200)};">blabla</td>
<td width="100"><image></td>
</tr>
</table>