asked on

Exact/percentage row heights

Howdy all,

I'm trying to display a table with three rows.

The top and bottom rows have fixed heights but the
middle row I would like to expand to fill up the
available screen height.

I have this (kind-of) code for the table:

<table height="100%">
<tr height="24">
...
<tr height="100%">
...
<tr height="24">
</table>

I know 100% probably isn't the best thing to put
for the middle row (seeing as, technically, it's
not really 100% but 100%-48) but I can't think of
what else to use.

IE 5.01/5.5 displays it with no problems.
Netscape 6.01 and IE 4.01 share the same problem:
they seem to divide up the table equally, so that
all three rows have the same height.

Now: WTF??? I've specified exact heights for two
of the rows and NS6/IE4 is ignoring it.

Any ideas would be appreciated.

Thanks!

Peter.

ASKER CERTIFIED SOLUTION

amtd

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Peter Monk

ASKER

Hi AMTD,

Thanks for your post.
The code you posted was helpful. The page now looks fine
under IE 4, which it didn't before. However, Netscape
still renders the page incorrectly.

I've changed the code from one table with three rows to
three separate tables, the middle one being the 'maintable'.

Here's the jist of it:

<table class="nav" width="220" height="24" cellpadding="0" cellspacing="0">
<tr height="100%">
<td class="aquaback" width="210" style="padding-top:2px;padding-left:8px">
...stuff...
</td>
<td width="10" class="aquaback"> </td>
</tr>
</table>

<table class="nav" id="maintable" width="220" cellpadding="0" cellspacing="0">
<tr height="100%">
<td width="210" style="padding-top:0.5em;padding-left:0.22em;vertical-align:top">
...stuff...
</td>
<td width="10" class="aquaback"> </td>
</tr>
</table>

<table class="nav" width="220" height="24" cellpadding="0" cellspacing="0">
<tr height="100%">
<td class="aquaback" width="220" style="padding-top:2px;padding-left:8px">
...stuff...
</td>
<td width="10" class="aquaback"> </td>
</tr>
</table>

<script language="JavaScript">

</script>

Netscape seems to ignore the height specified - it only
renders the middle table as high as is required to fit it's contents in, as opposed to the full height of the
screen.

Any further comments would be appreciated!

Peter.

amtd

sorry,I have not NC in my computer.

DreamMaster

pmonk > The problem you are having with Netscape is that you are mixing percentages and fixed heights...Netscape is a pain in the **S when it comes to table heights and widths that are mixed....

When you have a problem like that...strip either the percentages or the fixed heigths and try again...I understand that in this case that will be hard...

But in case you need to have the middle row stretch, you can do so using javascript, calculate the availableHeight and substact the heights allready given to the other cells...

Max.

swinslow

ComTech

pmonk has requested a split and I have accepted the first part.

I will now create a question for DreamMaster in this TA for his share.

Best regards,
ComTech
Community Support Moderator