beansetcHi, I have a table layout with a nested table (tbl_body) for content inside a bigger layout table (tbl_main), and I can't get the tbl_body to stetch the entire height of the surrounding table in Firefox; it only stetches to the length of the content already in it. How do I get it to go 100% height?
It was doing this in Safari too, but I used the dislay:inline-table and that fixed it there, but now I can't get it to work in Firefox. I've spent an entire evening trying different fixes I've seen written in forums and stuff, but none of them work. Any ideas?
CSS:
.tbl_body { /*the nested table*/
margin: 0px;
display: inline-table; /*makes the nested table 100% height in safari*/
height: 100%;
min-height: 100%;
}
.td_content { /*the td in the nested table that I want to stretch 100%*/
padding: 10px 16px 0px 16px;
text-align: justify;
vertical-align: top;
overflow:hidden;
}
HTML:
<table border="1" class="tbl_main" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" width="742" height="152"><img border="0" src="img/i_banner.gif" width="742" height="152" /></td>
</tr><tr>
<td width="226" height="60"><img border="0" src="img/i_topleft.gif" width="226" height="60" /></td>
<td rowspan="2" valign="top" width="502" height="*">
<!-- TABLE BODY START -->
<table border="1" class="tbl_body" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td width="502" height="60"><img border="0" src="img/i_toptitle_welcome.gif" width="502" height="60" /></td>
</tr><tr>
<td class="td_content" background="img/i_midcontent.gif" width="502">CONTENT HERE</td>
(and then the rest of the table which shouldn't affect anything so I won't post it)
