Table based liquid page layout

need to keep as many browsers happy as possible

[griz_fan]

I'm trying to develop a table-based liquid page layout, but I'm stuck on the structure for the top navigation bar. What I have so far works well in Mozilla, and is "acceptable" in NS47, but doesn't behave like I'd like in IE6 or Opera 7. Part of the challenge is that I'd like all the columns to be fixed width with the expection of one column, which I'd like to expand with the browser window. In Mozilla, the column I've designated as my "expansion zone" expands with the browser window, but in IE6 and Opera 7 all columns expand with the browser window. Here's the code:

<table align="center" width="97%" cellspacing="0" cellpadding="0" border="1">
<tr>
<td rowspan="3" width="200" id="logocell"><img src="/images/clearpixel.gif" width="180" height="100" alt="main logo" border="1"></td>
<td><br><!-- spacer --></td>
<td colspan="3" width="240"><img src="/images/clearpixel.gif" alt="tagline" width="200" height="18" border="1"></td>
<td colspan="3" width="240">
<table border="0" cellspacing="2" cellpadding="2" align="right">
<tr>
<td><b>Link1</b> ¦ <b>link2</b> ¦ <b>link3</b></td>
</tr>
<tr>
<td align="center"><b class="white">Search:</b>
<form action="#" method="post" class="compact">
<input type="text" name="keywords" value="" size="16" maxlength="40">&nbsp;&nbsp;<input type="submit" name="submit" value="Go" class="smallgraybutton"></form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><br><!-- expansion zone --></td>
<td width="80"><br><!-- future use --></td>
<td width="80"><a href="#">Nav link 1</a></td>
<td width="80"><a href="#">Nav link 2</a></td>
<td width="80"><a href="#">Nav link 3</a></td>
<td width="80"><a href="#">Nav link 4</a></td>
<td width="80"><a href="#">Nav link 5</a></td>
</tr>
<tr>
<td><img src="/images/clearpixel.gif" width="110" height="1" alt="expansion zone spacer to hold minimum width" border="1"><br><!-- expansion zone --></td>
<td><br><!-- future use --></td>
<td>Subnav link 1</td>
<td>Subnav link 2</td>
<td>Subnav link 3</td>
<td>Subnav link 4</td>
<td>Subnav link 5</td>
</tr>
</table>

Any help would be greatly appreciated!

[martinibuster]

The way I design liquid layouts is to have a top row that spans from left to right with the right side td set to expand. Beneath that I'll nest a navigation area,etc.

Dreamweaver Missing Manual [sawmac.com] has an interesting page that demonstrates one way of doing it.

[tedster]

Yes, browsers are not "required" to restrict table cells to the width you specify. They have the freedom to change as they see fit.

I'm thinking you'll get better results by nesting a second table just for the cells that you want to keep fixed -- and keping the expansion cell outside in the parent table. All browsers are more likely to keep the table as a unit and not fool around - re-drawing only the expansion cell.

It's a bit tricky with your layout, and will require a rowspan for the td where the nested table endes up living, but I think this approach will work.