Height Percentage Problems ...

I have a HTML table built as follows

<table height="100%" width="100%">
   <tr>
       <td height="50"></td>
   </tr>
   <tr>
       <td>
<script>
document.write(obj);
</script>
       </td>
   </tr>
   <tr>
       <td height="100"></td>
   </tr>
</table>

Ok. So as you see when the window is stretched, the table will expand.
The problem I am experiencing is like this. In IE, if I set the grid (obj) width to percent, it works fine for all browsers. But height is a different story. If I set the height in the CSS or in the JS properties to 100%, in IE it will expand to the correct proportions and display properly, in a Mozilla browser, the screen gets entirely displayed out weird to the screen. Has anyone seen this sort of thing before? Does anyone know a work around?

Put a <DIV> in the <TD> and set the DIV height and width to 100%. Then put your grid inside the <DIV> (after the DIV has been created, in other words after the </DIV> tag). This should fix your problem.

<table height="100%" width="100%"> 
   <tr> 
       <td height="50"></td> 
   </tr> 
   <tr> 
       <td> 
          <DIV id="myDiv" width="100%" height="100%"></DIV>
       </td> 
   </tr> 
   <tr> 
       <td height="100"></td> 
   </tr> 
</table> 
<script> 
document.getElementById("myDiv").innerHTML = obj.toString(); 
</script>

I am getting the same results. IE works but Firefox doesn't.
Here is my code.

The style

<style>
#adminlist { width: 100%; height: 100%; }
#adminlist .aw-grid-control { width: 180px; font: menu; }
#adminlist .aw-column-0 .aw-header-0 { width: 0%; display: none!important; }
#adminlist .aw-column-1 .aw-header-1 { width: 100%; height: 20px; }
#adminlist .aw-grid-row { background: #eeeeee; height: 20px; border-bottom: solid #cccccc 1px; }
#adminlist .aw-alternate-even { background: whitesmoke; }
#adminlist .aw-mouseover-row { background: #cccccc;color: #000000; }
#adminlist .aw-mousedown-row { background: #999999;color: #000000; }
#adminlist .aw-cells-selected { background: none;color: #000000; }
</style>

The grid

<script>
var admins = [["test","test1"],["test","test2"]];

var adminlist = new AW.UI.Grid;
adminlist.setId("adminlist");

adminlist.setColumnCount(2);
adminlist.setRowCount(admins.length);
adminlist.setCellText(
function(col, row) {
    return admins[row][col];
});
adminlist.setHeaderText(["","Operators"]);
adminlist.setSelectorVisible(false);
adminlist.setColumnIndices([1]);
adminlist.setHeaderVisible(true);
adminlist.setColumnResizable(false);
adminlist.setCellEditable(false, 0);
adminlist.setCellEditable(false, 1);

</script>

The HTML

<table height="100%" width="100%" border="1"> 
   <tr> 
       <td height="50">&nbsp;</td> 
   </tr> 
   <tr> 
       <td> 
          <DIV id="myDiv" width="100%" height="100%"></DIV>
       </td> 
   </tr> 
   <tr> 
       <td height="100">&nbsp;</td> 
   </tr> 
</table> 
<script> 
document.getElementById("myDiv").innerHTML = adminlist.toString(); 
</script>

Forgot to add if you change this line for height to be in pixels, it renders perfectly.

#adminlist { width: 100%; height: 300px; }

Anyone have any insight on this?

Interesting! FireFox has a bug in the height property. If you set the height of the DIV with height="100%" it does not work. But if you do it inside a STYLE setting it works. Make the following change to your code and your problems go away in FF:

<DIV id="myDiv" width="100%" style="height:100%"></DIV>

Don't ask me why it works, it just does.

Thanks Jim

This is very interesting. It only looks like that fix works in FF 1.5. I tested with both 1.5 and 1.0.7, the 1.0.7 version does not work still. Man this is frustrating. Looks like this is a brick wall with my name on it. I wish I could say you need Firefox 1.5, but unfortunately I need to make this backward compatible. Maybe I need to do some scripting to set style to pixels if you run an older version of Firefox. But it still sucks because the interface will be pigeon held by the pixel contraints and actually look like it's wasting space when maximized on larger screen settings.

Hmmmmmmm anyone else have any ideas? Alex???
Or Jim, you have been a great help. Thanks again.

I just read something from Alex on another post. Have you tried to apply the style "table-layout:fixed" to the table? Alex points out that using that style tells the browser to calculate table sizes differently. I know the problem looks like it's in the grid or the DIV but try that style on the table to see if it helps at all. It's worth a try.

Well I tried this and it somewhat rendered, but not as desired.

And according to this
http://www.w3.org/TR/REC-CSS2/tables.html#fixed-table-layout

It is only fixed based on width, and does not take height into account. It seems to just change the algorithm used to calculate table width and render the HTML faster. Instead of waiting to calculate all the cells.

Alex do you have any suggestions? I am running out of avenues to explore here.

If you have a border or padding set for your TABLE, Firefox will act as it does when setting height property with a fixed number of pixels. If you set your TABLE with "height: 100%", it means that the height of the TABLE, NOT including the padding and the border-width, will display the equivalent of 100% of the body. So if you have a border, it will display under the visible area of the body!
I have published a post on that issue at http://ajax-prototype.blogspot.com/2006/01/width-percentage-issue.html

Thanks for the suggestion, but unfortunately that is not the issue here. It is the fact that rendering a DIV of 100% height within a table cell that stretches, then the AW grid is not rendered.

I had some similar problem I fixed it by running a JS function on <body onLoad="fixH()">

That gets the srceen's width and height then calculats my main table's width and height by deducting some fixed numbers (witch are my header, footer,...) from it. Then it uses those numbers to set width or height of some transparent images inside my table witch force the table to have the width and height that I want (witch fits the table to the screen)

That was going to be my last resort, and I may have to resort to it either with an onload, or onresize is probably more appropriate for my case, or both. Thanks for your ideas yamyam.