Simple forum problems - CSS and jQuery likely culprits for IE and FF incompatibility

I'm creating an ASP.NET MVC website. I have a CSS problem. In the website I have a very simple forum. You can expand messages by clicking on their title, and then you can reply to a message from within the message. These screen shots are from Chrome. However, when I load it up in IE or FF, the last bit under the reply form disappears (you can see it for half a sec and then it vanishes).

EDIT: Here's a link to a working example.

Here is the source code:

The HTML (with ASP.NET) function inside:

<div class="postNewMessageContainer">
        <% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" }))
           { %>
            <fieldset class="commentFieldset">
                <legend class="addCommentBtn">הוסף הודעה</legend>

                <div class="addCommentBox">
                        <%= Html.LabelFor(model => model.newMessage.messageSubject)  %>          
                        <%= Html.TextBoxFor(model => model.newMessage.messageSubject, new { @class = "required"})%>  

                        <%= Html.LabelFor(model => model.newMessage.messageComposer)  %>    
                        <%= Html.TextBoxFor(model => model.newMessage.messageComposer, new { @class = "required"})%>      

                        <%= Html.LabelFor(model => model.newMessage.messageContents)  %> 
                        <%= Html.TextAreaFor(model => model.newMessage.messageContents, new { @class = "required"})%>

                        <input type="hidden" name="newMessage.parentMessageID" value="0" />

                    <div>
                        <input type="submit" value="שלח"/>
                    </div>
                </div>
            </fieldset>


        <%} %>
    </div> <%-- postNewMessageContainer --%>

    <%-- display all forum messages --%>
    <div class="forumContainer">
    <% foreach (var completeParentMessage in Model.CompleteForumMessages.Where(a=>a.parentMsg.isActive == true))
       {%>
        <div class="forumMessageContainer userType<%=Html.Encode(completeParentMessage.parentMsg.MessageAuthorType)%>" 
        id="forumMessage<%=Html.Encode(completeParentMessage.parentMsg.MessageID)%>">
            <div class="msgHeader">    
                    <span class="forumMsgSubject"><%=completeParentMessage.parentMsg.MessageSubject%></span>
                    <span class="forumMsgComposer"><%=completeParentMessage.parentMsg.MessageComposerName%></span>
                    <span class="forumMsgDate"><%=completeParentMessage.parentMsg.MessageDate.Value.ToString()%></span>
            </div>
            <div class="msgContents">
                    <span class="forumMsgText"><%=completeParentMessage.parentMsg.MessageContents%></span>


                    <% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" }))
                       { %>
                        <fieldset class="commentFieldset">
                            <legend class="addCommentBtn">הוסף תגובה</legend>

                            <div class="addCommentBox">

                                    <%= Html.LabelFor(model => model.newMessage.messageSubject)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageSubject, new { @class = "required" })%>  

                                    <%= Html.LabelFor(model => model.newMessage.messageComposer)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageComposer, new { @class = "required" })%>      

                                    <%= Html.LabelFor(model => model.newMessage.messageContents)  %> 
                                    <%= Html.TextAreaFor(model => model.newMessage.messageContents, new { @class = "required" })%>

                                    <input name="newMessage.parentMessageID" type="hidden" 
                                    value="<%=completeParentMessage.parentMsg.MessageID %>" />

                                <div>
                                    <input type="submit" value="שלח"/>
                                </div>
                            </div>
                        </fieldset>


                    <%} %>

            </div>
       </div> 

       <%-- display all responses to current message in loop --%>                     
       <% foreach (var childMessage in completeParentMessage.childMsgs)
          { %>
            <div class="forumSubmessageContainer userType<%=Html.Encode(childMess开发者_如何学运维age.MessageAuthorType)%>" 
            id="forumMessage<%=Html.Encode(childMessage.MessageID)%>">
                <div class="msgHeader">    
                        <span class="forumMsgSubject"><%=childMessage.MessageSubject%></span>
                        <span class="forumMsgComposer"><%=childMessage.MessageComposerName%></span>
                        <span class="forumMsgDate"><%=childMessage.MessageDate.ToString()%></span>
                </div>
                <div class="msgContents">
                        <span class="forumMsgText"><%=childMessage.MessageContents%></span>

                       <% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" }))
                       { %>
                        <fieldset class="commentFieldset">
                            <legend class="addCommentBtn">הוסף תגובה</legend>

                            <div class="addCommentBox">

                                    <%= Html.LabelFor(model => model.newMessage.messageSubject)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageSubject, new { @class = "required" })%>  

                                    <%= Html.LabelFor(model => model.newMessage.messageComposer)  %> 
                                    <%= Html.TextBoxFor(model => model.newMessage.messageComposer, new { @class = "required" })%>      

                                    <%= Html.LabelFor(model => model.newMessage.messageContents)  %> 
                                    <%= Html.TextAreaFor(model => model.newMessage.messageContents, new { @class = "required" })%>

                                    <input name="newMessage.parentMessageID" type="hidden" 
                                    value="<%=completeParentMessage.parentMsg.MessageID %>" />

                                <div>
                                    <input type="submit" value="שלח"/>
                                </div>
                            </div>
                        </fieldset>


                    <%} %>

                </div> <%-- /msgContents --%>
            </div> <%-- /forumSubmessageContainer --%>

          <%} %>

       <%} %>

    </div> <%-- /forumContainer --%>

This is the Javascript:

<script type="text/javascript">

    $(function() {

        $(".msgContents").hide();
        $(".msgHeader").click(function() {
            var div = $(this).next("div");
            if (div.is(":hidden")) {
                div.slideDown();
            } else {
                div.slideUp();
            }
        });

        $(".addCommentBox").hide();
        $(".addCommentBtn").click(function() {
            var div = $(this).next("div");
            if (div.is(":hidden")) {
                div.slideDown();
            } else {
                div.slideUp();
            }
        });
    });
</script>

And the relevant CSS:

    /* ========== Forum ========== */

.forumMessageContainer , .forumSubmessageContainer
{
 margin-top: 3px;
 margin-bottom: 3px;
 padding-right: 4px;
 font-size: 15px;
 height: 100%;
}

.forumMessageContainer 
{
 background-color:#CCBBDD;
}

.forumSubmessageContainer
{
 background-color:#CCBBDD; /*#CCCCDD;*/
}

.userType1
{
 background-color: #9966CC;
 color: White;
}

.commentFieldset
{
 background-color: #FFFFFF;
 margin: 2em;
}

.addCommentBox
{

}

.msgHeader .forumMsgSubject
{
 float:right;
}

.msgHeader:hover, .addCommentBtn:hover
{
 cursor: pointer;
}

.msgHeader .forumMsgDate
{
 float:left;
 padding-left: 5px;
}

.msgHeader .forumMsgComposer
{
 padding-right: 5%;
 font-weight:bold; 
}


.forumSubmessageContainer
{
margin-right:3%;
}

.ForumBackNext
{
 padding-top: 10px;
 text-align:center;
}

#newMessage_messageContents
{
 height:150px;
 width:350px;


}

#newMessage_messageSubject, #newMessage_messageComposerName
{
 width:350px;
}



.deleteForumMsg
{
 padding-top: 5px;
 padding-left: 5px;
 float: left;
}

I would appreciate all and any help on the matter.

Also - in IE the forum "titles" (the message title, composer name and date) and new message form look really bad. So perhaps it could provide further insight into understanding the problem. And if someone has a solution for that as well - I'd really really appreciate it :-)

Thank you all very much!

---

Ah, ok. I believe what you are seeing here are collapsing margins.

The easiest solution would probably be to put a padding on the form instead of the margin on the fieldset.