Databases
StackOverflow2013
Postsdbo
POSimple forum problems - CSS and jQuery likely culprits for IE and FF incompatibility
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimple forum problems - CSS and jQuery likely culprits for IE and FF incompatibility
    text
    copied!<p>I'm creating an ASP.NET MVC website. I have a CSS problem. In the website I have <a href="http://i.stack.imgur.com/s6CEZ.png" rel="nofollow">a very simple forum</a>. You can <a href="http://i.stack.imgur.com/rWmAa.png" rel="nofollow">expand messages</a> by clicking on their title, and then you can <a href="http://i.stack.imgur.com/u3ArV.png" rel="nofollow">reply to a message</a> 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 <a href="http://i.stack.imgur.com/7EjkX.png" rel="nofollow">disappears</a> (you can see it for half a sec and then it vanishes).</p> <p><strong>EDIT</strong>: Here's a <a href="http://www.dlaglagim.com/Home/Forum/0" rel="nofollow">link</a> to a working example.</p> <p>Here is the source code:</p> <p>The HTML (with ASP.NET) function inside:</p> <pre><code>&lt;div class="postNewMessageContainer"&gt; &lt;% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" })) { %&gt; &lt;fieldset class="commentFieldset"&gt; &lt;legend class="addCommentBtn"&gt;הוסף הודעה&lt;/legend&gt; &lt;div class="addCommentBox"&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageSubject) %&gt; &lt;%= Html.TextBoxFor(model =&gt; model.newMessage.messageSubject, new { @class = "required"})%&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageComposer) %&gt; &lt;%= Html.TextBoxFor(model =&gt; model.newMessage.messageComposer, new { @class = "required"})%&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageContents) %&gt; &lt;%= Html.TextAreaFor(model =&gt; model.newMessage.messageContents, new { @class = "required"})%&gt; &lt;input type="hidden" name="newMessage.parentMessageID" value="0" /&gt; &lt;div&gt; &lt;input type="submit" value="שלח"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;%} %&gt; &lt;/div&gt; &lt;%-- postNewMessageContainer --%&gt; &lt;%-- display all forum messages --%&gt; &lt;div class="forumContainer"&gt; &lt;% foreach (var completeParentMessage in Model.CompleteForumMessages.Where(a=&gt;a.parentMsg.isActive == true)) {%&gt; &lt;div class="forumMessageContainer userType&lt;%=Html.Encode(completeParentMessage.parentMsg.MessageAuthorType)%&gt;" id="forumMessage&lt;%=Html.Encode(completeParentMessage.parentMsg.MessageID)%&gt;"&gt; &lt;div class="msgHeader"&gt; &lt;span class="forumMsgSubject"&gt;&lt;%=completeParentMessage.parentMsg.MessageSubject%&gt;&lt;/span&gt; &lt;span class="forumMsgComposer"&gt;&lt;%=completeParentMessage.parentMsg.MessageComposerName%&gt;&lt;/span&gt; &lt;span class="forumMsgDate"&gt;&lt;%=completeParentMessage.parentMsg.MessageDate.Value.ToString()%&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="msgContents"&gt; &lt;span class="forumMsgText"&gt;&lt;%=completeParentMessage.parentMsg.MessageContents%&gt;&lt;/span&gt; &lt;% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" })) { %&gt; &lt;fieldset class="commentFieldset"&gt; &lt;legend class="addCommentBtn"&gt;הוסף תגובה&lt;/legend&gt; &lt;div class="addCommentBox"&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageSubject) %&gt; &lt;%= Html.TextBoxFor(model =&gt; model.newMessage.messageSubject, new { @class = "required" })%&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageComposer) %&gt; &lt;%= Html.TextBoxFor(model =&gt; model.newMessage.messageComposer, new { @class = "required" })%&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageContents) %&gt; &lt;%= Html.TextAreaFor(model =&gt; model.newMessage.messageContents, new { @class = "required" })%&gt; &lt;input name="newMessage.parentMessageID" type="hidden" value="&lt;%=completeParentMessage.parentMsg.MessageID %&gt;" /&gt; &lt;div&gt; &lt;input type="submit" value="שלח"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;%} %&gt; &lt;/div&gt; &lt;/div&gt; &lt;%-- display all responses to current message in loop --%&gt; &lt;% foreach (var childMessage in completeParentMessage.childMsgs) { %&gt; &lt;div class="forumSubmessageContainer userType&lt;%=Html.Encode(childMessage.MessageAuthorType)%&gt;" id="forumMessage&lt;%=Html.Encode(childMessage.MessageID)%&gt;"&gt; &lt;div class="msgHeader"&gt; &lt;span class="forumMsgSubject"&gt;&lt;%=childMessage.MessageSubject%&gt;&lt;/span&gt; &lt;span class="forumMsgComposer"&gt;&lt;%=childMessage.MessageComposerName%&gt;&lt;/span&gt; &lt;span class="forumMsgDate"&gt;&lt;%=childMessage.MessageDate.ToString()%&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="msgContents"&gt; &lt;span class="forumMsgText"&gt;&lt;%=childMessage.MessageContents%&gt;&lt;/span&gt; &lt;% using (Html.BeginForm("Forum", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "postMessageForm" })) { %&gt; &lt;fieldset class="commentFieldset"&gt; &lt;legend class="addCommentBtn"&gt;הוסף תגובה&lt;/legend&gt; &lt;div class="addCommentBox"&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageSubject) %&gt; &lt;%= Html.TextBoxFor(model =&gt; model.newMessage.messageSubject, new { @class = "required" })%&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageComposer) %&gt; &lt;%= Html.TextBoxFor(model =&gt; model.newMessage.messageComposer, new { @class = "required" })%&gt; &lt;%= Html.LabelFor(model =&gt; model.newMessage.messageContents) %&gt; &lt;%= Html.TextAreaFor(model =&gt; model.newMessage.messageContents, new { @class = "required" })%&gt; &lt;input name="newMessage.parentMessageID" type="hidden" value="&lt;%=completeParentMessage.parentMsg.MessageID %&gt;" /&gt; &lt;div&gt; &lt;input type="submit" value="שלח"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;%} %&gt; &lt;/div&gt; &lt;%-- /msgContents --%&gt; &lt;/div&gt; &lt;%-- /forumSubmessageContainer --%&gt; &lt;%} %&gt; &lt;%} %&gt; &lt;/div&gt; &lt;%-- /forumContainer --%&gt; </code></pre> <p>This is the Javascript:</p> <pre><code>&lt;script type="text/javascript"&gt; $(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(); } }); }); &lt;/script&gt; </code></pre> <p>And the relevant CSS:</p> <pre><code> /* ========== 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; } </code></pre> <p>I would appreciate all and any help on the matter.</p> <p>Also - in IE the forum "titles" (the message title, composer name and date) and new message form <a href="http://i.stack.imgur.com/CbW6E.png" rel="nofollow">look really bad</a>. 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 :-) </p> <p>Thank you all very much!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload