obscured underscore in comment

That code actually says has_identity, but the underscore is obscured by the background of the OP's username in Chrome.

Image is from this answer, if anyone wants to see it in action.

share|improve this question
I figured this might also happen when an inline code block is very long and wrapped over multiple lines, but: nope. But then the example from the question looks fine on a Mac OS X Lion too. –  Arjan Nov 29 '11 at 22:50
Looks fine in FF8, Ubuntu. –  Kevin Nov 29 '11 at 22:50
Yep, there's too much padding on the asker's name; it goes slightly outside of the containing line, and the underscore is close enough to the bottom of above line. I see it in Chrome, Windows 7 –  Ben Brocka Nov 29 '11 at 22:58
repro'd on Chrome 16 / XP. –  Matthew Read Nov 29 '11 at 23:00
Oh yeah, should have mentioned, I'm using Chrome / XP as well. –  Cam Jackson Nov 29 '11 at 23:23
I confirmed it does not happen in Firefox 8 Win 7. Dosn't appear to happen in IE8 either, though I couldn't line up the comment lines like you had in your image. Maybe Chrome is adding too much padding or isn't adding as much space between lines. –  Ben Brocka Nov 30 '11 at 14:09
Does not happen in Firefox 8.0 or Chromium 14, Kubuntu (Linux). –  Rob W Nov 30 '11 at 22:51
Does not happen in Chrome 15, Safari 5, and Firefox 8 on Snow Leopard. –  Kevin Vermeer Dec 1 '11 at 0:22
Just came to here to post this same bug - Chrome 24/Win7. –  Karl Barker Dec 16 '12 at 20:22
add comment

2 Answers

The basic cause of this problem is insufficient line-height causing the background on the lower line to overlap the text on the line above it.

Unfortunately, determining just how much line height is "sufficient" is not as easy as it looks, since it varies a lot based on browser, OS, available fonts, user settings and zoom level. Things are particularly confusing for monospace text like the in-line code in the example comment, since browsers like to apply all kinds of font size hacks in an effort to "make it look better", but they all do it differently.

Thus, it's nearly impossible to avoid this issue completely (or at least, if it's possible at all, it would take a better CSS hacker than I am to do it). As far as I know, about the best we could do — assuming we don't want to increase the line spacing in comments to ludicrous levels — would be to increase the line height a bit, scale down the font size for code in comments a little and hope that these changes together will reduce the likelihood of this happening.

Of course, if anyone knows a better solution, I'd very much like to hear it.

Edit: I did find a workaround for this problem (on SO, where else?), although it's not a pure CSS fix.

The basic trick is wrapping the text inside the inline element with a non-transparent background in a span and assigning the position: relative CSS attribute to that span. However, this only prevents the text inside the span from being overlapped by the background, but does nothing to protect other text in the same paragraph. The situation in our case is further complicated by the potential presence of multiple sections of text with their own backgrounds.

Thus, to apply the fix in this case would seem to require something like the following:

  1. Wrap all text both inside and between any in-line elements with non-transparent backgrounds (such as code) in extra span tags, so that e.g.:

    This is text with <code>some code</code> mixed in it.


    <span>This is text with </span><code><span>some code</span></code><span> mixed in it.</span>

    (Of course, you'd then have to deal with correct tag nesting is situations like This is <i>some italic text <code>with code in it</code></i>., which could quickly get ugly. Still, it's basically doable; the easiest solution might be to just wrap every text node in a separate span.)

  2. Style all the spans with position: relative.

I've tried this by hand using Firebug, and it works: the text floats above the backgrounds no matter how much I reduce the line height. Here's a screenshot of the example comment linked from the question, manually tweaked and restyled to demonstrate the fix:


(Note that I also deliberately increased the font size and reduced the line height for the demo to make the lines of text overlap badly. Without those changes, the position: relative hack itself doesn't change the appearance at all, except of course to prevent the background from covering the text.)

Edit: A limited version of this fix is now included in the Stack Overflow Unofficial Patch v1.2. It only adds position: relative to the comment body as a whole, and so prevents the username from overlapping the comment text, but it does not currently stop code segments within a single comment from overlapping each other. Fortunately, this seems to be a less common issue.

share|improve this answer
This happens without code (regular text) as well. –  Asad Jan 2 '13 at 21:10
OK, then it's just a matter of the line height being too small. –  Ilmari Karonen Jan 2 '13 at 21:12
add comment

I just came across this issue as well.

I noticed that in comments, a user's link can sometimes overlap with the user's text. This happens when the comment is more than one line, and when the text has characters that go below the base line of the text. I originally noticed this because the comment was indicating a variable named _mm_mul_ps, but it was showing up in the comment as _mm mul ps and it was a little confusing at first until I realized the overlap.

A few examples

source: If statements with comparison SSE in C

I then looked at Meta and noticed that the issue is here too (the first simple instance I found was with the bottom of a y being cut off.

source: Impossible audio Recaptchas makes Stack Overflow site inaccessible


I remember that recently there were some changes made to the .css where, if I remember correctly, it was to squeeze a little speed out by simplifying styles. So with that in mind, I believe that this issue can be solved with simplification.

Simply make this change:

a.comment-user.owner {
 padding: 0 5px;

Previously it was padding: 2px 5px 2px 5px;.

Working Example

Here is an example of the fix working with question linked by OP:

share|improve this answer
add comment

You must log in to answer this question.

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