Table height 100%

how can you do this for Netscape and IE6

[sullen]

I have a site which has fancy side panels which need to be set to the full length of the page or it looks silly.

My first thought was to put it in a table and set the height to 100%. This has never worked in netscape (unless I've been missing something) and I wouldn't worry too much about that (what, 5% of users?), but it evidently doesn't work in IE6 either. The table (panel) has a rounded-corner graphic at the bottom so I can't simply set the background colour on the cell which contains it

So my solution was to put a 1px wide image at the side of the table to force it to the length I need. But this means I have to reset the height every time I add or remove a sentence to the page and it's a complete pain.

Does anyone have any better ideas?

[tedster]

This challenge comes up often, both on the forums here and in my own work. It's complicated by the fact that the W3C never recommended a height attribute for the table tag, and beginning with HTML 4, the height attribute for the td tag has been deprecated.

Even using a div, where the height attribuite is fine, we're still not able to get good cross-browser results. That's what drove you to a table-based solution in the first place.

I've simply abandoned the design concept for now, because as you say, it IS a pain to create invisible content to force the height, and then keep changing it with each page revision.

So I just consider this the way I would think about painting with oils on watercolor paper. The colors may be what I want, but the approach is wrong for the medium I'm using.

Has anyone come up with anything better? I'd like to know too.

[Krapulator]

You could play around with CSS positioning. You will still get browser issues, but these are getting better with the newer browser versions.

[idiotgirl]

For Netscape, setting the <td> height to 100% in addition to the table height of 100% used to work, if I remember correctly:

<table border="0" cellpadding="0" height="100%">
<tr><td height="100%">left side tiled vertical graphic</td>
<td valign="top">center content</td>
<td height="100%">right side tiled vertical graphic</td>
</tr></table>

[grahamstewart]

Can't you set the table height using css?

e.g. inline..

<table style="height:100%">

or in an external stylesheet..

table {
height: 100%;
}

(Note: if you do that then you also need to set the height of the body to 100% for it to work properly)

[sullen]

thanks everyone.

I've managed to fix it in IE6 (key thing was to make the table cell containing the table 100% high), but still having no luck in netscape.

idiotgirl - I've tried adding height="100%" to everything in sight, but Netscape is still not having it. I think this is because the table is nested within another one.

hoorah for netscape.

[gph]

try

html, body {
height: 100%;
}

[henry0]

Hello
one should not disregard NN
add about 6%NN + 3% Opera ....

Opera is a tough browser but sticks to W3 if a page works in Opera it will work all over the place

In NN I found that to deal with <TD> bg color
the best way is to use none!
instead create an Img similar to the BG you wish to use
and use that img as BG
cheers

[sullen]

henry0 - don't mean to diss Netscape, but it is quite definately not W3C compliant.

Can't make a graphic to use instead of the bgcolor because the fact that the panels need to be of variable height (depending on the height of the page) - it is this that i can't do in Netscape.

[gph]

Did you try my suggestion? If you're using a strict doctype and using 100% heights you have to declare html as 100%. If you're not using a strict doctype it still won't hurt anything (unless you're using outer page margins).

You don't need a big graphic the exact size of the table. Just use a 1x1 pixel graphic and tile it.

[w3schools.com...]

don't mean to diss Netscape, but it is quite definately not W3C compliant

I disagree. I think you'll find that your problem is caused by its compliance. The new Gecko browsers are very compliant and allow no margin for error. Just because a page validates doesn't mean it will render as the author intended.

This is only based on my personal experience. I've yet to find an error. If you feel I'm wrong make a test page illustrating the problem and post it here.

Here's an example that should show a vertical scrollbar. I set the height to 100% + 20px. It doesn't in IE6.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>center</title>
<style type="text/css">
html {
border: 10px solid;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
table {
height: 100%;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
content
</td>
</tr>
</table>
</body>
</html>

[sullen]

gph - I've just tried again, with various versions of Netscape.

However, I'm not using XHTML (backward compatability problems) and I don't declare a doc-type. Other than that the code is W3C standard code (the old standards, including <br> tags rather than <br/>). Also I use an external stylesheet - that's what I've been altering. Could any of those things cause your code to fail?

Personally, I think the problem is that the table in question is nested within another two tables. I think perhaps I should start from the beginning and rewrite the code.

[gph]

Yes it could be alot of things, something in the style sheet, improper nesting, incomplete tags... Nesting tables in tables can get pretty knotted up. I'd start fresh as well.

IE is a good browser but it's designed to overlook small errors. It will quietly lead you down the wrong path. Try testing in NN and/or Opera while you build it. You'll find that if it's working in those browsers it will work in IE.

The only thing that needs to be tested in IE is the JavaScript onresize event because it continually fires as the window is resized.