The following information has arisen from hours of research into and actual website development resulting in:

BetterGoBids.com™

The Premier GoTo.com™ Bid Management Tool!

BetterGoBids.com is the easiest way to monitor your bids for correct position and optimum bids. BetterGoBids.com reports only those terms that require your attention. If everything is correct, that's all your report states. If two terms require your attention, then your report contains just those two terms with actual suggested bids to correct the situation!

Content First / Navigation Last Table Trick

When I first tried the table trick used to move the HTML for a left-side navigation bar below the page's content, I found two problems:

1) In some cases, Internet Explorer V3 for PC and IE V4.5 for Mac drop the navigation bar about halfway down the left column -- sometimes out of view. This seems to occur when the height of the right side content is more than twice the height of the navigation bar. Unfortunately, the height of your content depends upon the screen width and cannot be predicted.

2) Most other browsers try too hard to do something "intelligent" with row spacing and add some amount of whitespace above the nav bar also resulting in nav bar dropping some.

To see if a browser exhibits the dropped navigation bar problem described in item 1 above, view the following page with the browser:
test_table_trick.html

If you find a browser other than IE V3 for PC or IE V4.5 for Mac that drops the nav bar, please let me know.

To solve problem 1, I use the javascript levitate() function below to insert blank lines at the bottom of the navigation bar to make it "taller". To figure out what value to pass as the "count" parameter I use the always reliable "trial & error" method (i.e. I guess a number, test it, and guess again) with IE V3 on a PC set to 640x480 resolution.


function levitate( count )
{

  // if navigator or PC IE version4 or higher, do nothing 

  if( is_nav || (is_ie4up && !is_mac) )  // see note 1 below
    return;

  // browser is IE V3 for PC or any Mac IE,
  // write 'count' empty lines 

  var i;
  for( i = 0; i < count; i++ )
    document.write( "<br>&nbsp;<br>" );

}

THE ORIGINAL TABLE TRICK HTML as given by Jere Matlock at:
http://www.wordsinarow.com/tabletrick.html


<html>
<head>
</head>
<body>
<table>
<tr>
<td><!-- leave this TD empty - it will disappear --></td>
<td rowspan="2">Put the text for the page here.
</td>
</tr>
<tr>
<td>Put the Navigation Bar Here</td>
</tr>
</table>
</body>
</html>

AS MODIFIED TO SOLVE PROBLEM 1 with the levitate() script to add 15 blank lines ('15' is for example only, the number you use depends upon your page's right-side content) to the bottom of the nav bar:


<html>
<head>
</head>
<body>
<table>
<tr>
<td><!-- leave this TD empty - it will disappear --></td>
<td rowspan="2">Put the text for the page here.
</td>
</tr>
<tr>
<td>Put the Navigation Bar Here

<!-- PLACE THE LEVITATE FUNCTION CALL HERE -->
<script type="text/javascript">
  <!--
    levitate( 15 )
  // --> 
</script>
<!-- END OF SCRIPT CODE FOR LEVITATE FUNCTION CALL -->

</td>
</tr>
</table>
</body>
</html>

TO SOLVE ITEM 2 ABOVE -- dropped nav bars on most other browsers -- you need to make two additional changes. 1) Include a 1-pixel by 1-pixel image in the very first <td> element, and 2) add the the 'valign="top"' attribute to the <td> element that holds nav bar (which makes sense). In most of my test cases the "valign" attribute solved the problem, but other cases required the pixel image. The strange thing is that these cases depended upon what the right-side page content was. In any event, the fully modified table trick that should work on most all browsers:


<html>
<head>
</head>
<body>
<table>
<tr>
<td>

  <!-- THIS IS A 1x1 PIXEL IMAGE TO KEEP
  BROWSERS FROM THINKING TOO MUCH-->

  <img src="pixel.gif">

</td>
<td rowspan="2">Put the text for the page here.
</td>
</tr>
<tr>

<!-- THIS IS THE VERY IMPORTANT valign ATTRIBUTE -->
<td valign="top">Put the Navigation Bar Here

<!-- PLACE THE LEVITATE FUNCTION CALL HERE -->
<script type="text/javascript">
  <!--
    levitate( 15 )
  // --> 
</script>
<!-- END OF SCRIPT CODE FOR LEVITATE FUNCTION CALL -->

</td>
</tr>
</table>
</body>
</html>

Questions or Comments

Notes:

1) The script variables, "is_nav", "is_ie4up", and "is_mac", are set by a separate browser detection script. You can modify the levitate() function to use your particular browser detection method or use my detection script that can be found at Browser Detection Script.

2) If the count value passed to levitate() is too large, the nav bar may be taller than the content on high resolution screens and can cause a scroll bar to be displayed for no good reason. If the user scrolls down, he or she will see nothing but additional empty space caused by the empty lines included by the levitate() script.

3) Although IE V4 for Mac does not exhibit problem 1, V4.5 for Mac does. Unfortunately, V4.5 reports as V4, meaning you cannot differentiate between the two versions. The simple solution is to let the script run for all Mac versions. I don't know if Mac IE versions newer than 4.5 exhibit problem 1 or not. (Heck, I don't even know if there are newer versions.)

4) Problem 1 can be ignored if you don't care about these older browsers.

5) Problem 2 cannot be ignored for those PC versions of browsers with which I've tested.