I've got this table:

<table id="correctness" style="overflow: hidden;">
<tr><td style="overflow: hidden;">
<div id="correctness-message"></div>
<span class="hide">
  <button type="button" class="hide" onclick="new DisplayEffect('correctness').Hide(500);">Hide</button> 
</span>
</td>
</tr>
</table>

and a function for resizing the table:

function resize(element, size) { element.style.height = size + "px";};

which is called for a certain amount of time (e.g. 1 second) with the ID of table (i.e. "correctness") in order to resize the table from zero height to its full height.

This code works in Firefox and Chrome but it doesn't work in IE8. What it does is that it displays right away whole table even thought the height set in "resize" method is much lower.

It seems that the cell sets the height of parent table and not the other way around.

Is it possible to change the behaviour? I like changing the height of the table better because I can set visibility of the table easily.

Thanks for any help!