views:

25

answers:

0

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?