For some reason the rendering of the right hand column of the webpage is overlapping my comments and is preventing me from editing or deleting my post...

Screen Resolution: 1280 x 800

Windows XP

Chrome, Latest Version

Link to original question.

Rendering Error

share

2 Answers 2

up vote 10 down vote accepted

This rendering occurred because:

  1. In one of your MathJax statements, a $ was left out at the beginning, so there was an odd number of $ meaning that most of your comment was interpreted as MathJax and rendered as such.
  2. Your use of markdown for the link was also incorrect. The correct syntax is [text description](http://yourlink.com).

I have edited the comment to correct these errors. Please check that it looks alright. I (or one of the other mods) can make additional edits, if necessary.

It was actually a little difficult to even make the edits: I had to go into my browser's DOM inspector and manually hide the "Hot Questions" bar at the right so that I could click on the comment's edit link.

Please make sure to double-check the MathJax and other markdown before submitting comments. For complicated math in comments, one way to double-check is to use the page's Answer box to make sure it renders properly there and then cut and paste everything into a comment once it looks alright.

share
2  
$This is a test of how a fairly long comment will render if all of it is wrapped inside a pair of dollar signs making MathJax think it's a single very long math expression. Let's see what happens...$ –  Ilmari Karonen Mar 9 at 22:35
1  
Hmm, it's not so bad for me, since MathJax breaks the line at the comma after "dollar signs". I wonder what happens if I remove the comma... –  Ilmari Karonen Mar 9 at 22:40

As cardinal notes in his answer, the problem is caused by an extremely long MathJax expression that exceeds the normal width of the comment area. Normally, MathJax does allow excessively long expressions to be broken over multiple lines, but that requires the expressions to actually contain some "natural" breakpoints such as commas or math operators. If it's all just run-on text, it won't get wrapped.

Since the comments are formatted using HTML tables, the over-long math expression then causes the whole comments table to expand to accommodate it. The obvious fix would be to just disable this behavior with the CSS rule:

.comments > table { table-layout: fixed }

Alas, this causes the table cells reserved for the upvote / flag links and the vote count to expand out of control, requiring a couple of additional CSS rules to fix it:

.comments > table > * > tr > td:first-of-type { width: 30px }
.comment-actions > table { float: right }
.comments td { vertical-align: top }

(The reason for using the weird selector .comments > table > * > tr > td:first-of-type instead of just plain .comment-actions is because for some table rows, such as unvoted self-posted comments and the "add a new comment" form, the class name is actually missing. Go figure.)

As a minor bonus, the new styling keeps the left edge of the comment text consistently positioned. Currently, large upvote counts can cause the table column containing them to expand to the right, pushing the comment text ahead of it. With the extra styles given above, the vote counts expand to the left instead, where there's plenty of space for them.

Ps. While waiting for the SE devs to fix this styling issue properly, I've added the CSS fix described above to version 1.10 of the Stack Overflow Unofficial Patch. Please let me know if you encounter any unwanted side effects from it.

share

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .