Q:

Disappearing  after $.slideDown()

I'm having an issue in IE7 and below where a form that I'm toggling the display of via $.slideUp() & $.slideDown(), has an disappearing textarea.
This is the form code:
<% using (Html.BeginForm("AddComment", "Comment", FormMethod.Post, new { id = "addCommentForm", @class = "comments-form" }))
 { %>
    <input type="hidden" name="SiteID" value="<%: Model.Name %>" />
    <table>
        <colgroup>
            <col class="comments-form-text" />
            <col class="comments-form-submit" />
        </colgroup>
        <tbody>
            <tr>
                <td>
                    <textarea name="Text" rows="2" cols="75"></textarea>
                </td>
                <td>
                    <div>
                        <input type="submit" value="Add Comment" />
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <% } %>

I'm toggling the display on a button click in javascript (using jQuery) with:             $('#addCommentForm').slideDown();
My issue is that in IE7 and below, the text area disappears when the form has finished sliding down. It only reappears when I most over the submit button (which has been styled using jQueryUI .button() method).
When I say disappears, it's gone. Looking at the html in the IE Dev Tools, it's html is still there, it's just not being rendered at all.
As much as I absolutely hate IE, I am required to support it :(
Anyone have any ideas why this is happening? Or how I can mitigate it?

A:

There are some ways of solving this problem:

Try using another element, like a
span instead of a div element to
slideDown. Might be an IE's rendering
bug;
Another approach, is to set zoom:1;
in your CSS to the element you're
trying to slideDown;
You can also solve this setting a
min-height to your sliding element in
your CSS;

