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 set an explicit maximum width for the comment text, e.g. with:

.comment-body {
    max-width: 630px;
    overflow: auto;
    overflow-y: hidden;
}

These CSS rules cause any over-wide comments to acquire a horizontal scroll bar instead of spilling over into the sidebar, like this:

Screenshot

Ps. While waiting for the SE devs to fix this styling issue properly, I've added the CSS fix described above to version 1.22 of the Stack Overflow Unofficial Patch. (Earlier versions, since v1.10, included a slightly different fix using table-layout: fixed instead.) 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 .