Table cell won’t stetch to height

Hi, 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)