Bartik comment layout was borked recently

Looks like it was a side effect of #895898: Comment user picture can overflow its container. Quick patch attached, minimally tested.

#1, won't work in IE, needs an override, but does work in Firefox, Opera and Chrome. I am not sure this can be made to work in IE...

The Patch for style.css works on Chrome, Firefox and IE 8 - even without the patch for ie.css. Have not tested the same on lower versions of IE.

Yeah, it works in IE8, but not IE6/7 - meaning the comments are still shrunken to fit the width of the text, I overrode the width: 100%; with width: auto; for IE6/7

This is a pretty silly problem.

Should I roll back #895898: Comment user picture can overflow its container while we get this figured out? Or does it feel close?

I dont think rolling it back is the right answer because that will bring back a much worse issue (if users change the size of the comment-picture the layout will break), whereas this is mere styling issue. That said, no, this is not close to a fix for IE6/7, frankly I think it might be impossible to fix for those browsers - I'll keep working on it. I might need to completely re-write how this works to support the design objective in all browsers, which is not a problem :)

OK, think we have a solution after all. No RTL, needs RTL but good for testing in IE LTR...

It's not pretty, but this works. If we need ie6/7 to give us table-cell behavior, then we give them tables...

IE6 and 7 don't actually get the display:table-cell, for IE6/7 its overridden with inline-block which is triggering the DIV to expand full width, in effect taking advantage of a bug in IE... tricky and not that pretty either, but as you say, it works.

Re: #8

- Works without adding table markup, yay!
- It allows the comment-text height to shrink in IE
- The gap between the photo and arrow is larger than in Safari or Firefox.

Re: #9

- Adds tables for layout, boo!
- Comment-text height doesn't shrink shorter than the photo/attribution area
- There is too much space between the comments, need to fix that if we like this approach.

Well, lets not add tables, they could open a whole new can of worms (accessibility), so lets just not go there.

Patch in #8 needs work, it has wrinkles, it was a POC patch for basic testing - it does work in my testing and just needs a bit of adjustment (padding/margins sort of thing) and RTL.

Sounds fine, Jeff. Also forgot to point out that the comment boxes in #8 are too wide, they extend past the right text edge (see screenshot above).

OK, here is an update on the patch in #8, just a refinement really, same basic principles.

I like this because we have no changes in markup and it actually fixes the issue - there are some small visual differences between various browsers depending on how big the user picture is - when the user-picture is thumbnail size the space between attribution and the bubble is a little bigger in IE6/7 than other browsers. When the user-picture is bigger (e.g. medium size) the difference is imperceptible.

FWIW I actually like the shrinking bubbles, I thought it was kinda neat :)

Not sure what is going on there, dont think the failure is real.

#14: bartik-comment-layout-borked_3.patch queued for re-testing.

Here's a screenshot of #14 in IE7. I purposely chose a wider-than-default date format. The differences between IE7 and other browsers are:

(a) The comment text may shrink in height to be shorter than the attribution area, leading to uneven gaps between the comments
(b) The attribution area lets the date expand the width rather than shrinking to fit the photo

Both of these problems existed before the patch, and the patch does fix the width problem, so it's almost RTBC*. Fixing (a) and (b) would require something like patch #9 but that would be a separate issue.

* I just noticed a problem with the 100% width solution for everyone else -- if a user doesn't have a photo then the attribution area shrinks to be too narrow. See the ff3 screenshot. Attached patch takes care of this problem by adding:

.comment .attribution .username {
  white-space: nowrap;
}

The patch in 19 looks good and should be ready to fly for browser testing, will try to get some done today, only days to go so time to rock and roll on these last annoying issues.

Tested in Chromium 10.0.617.0 and Firefox 3.6.13 on Linux. Solves the issue in these two browser versions. Screenshots attached.

EDIT: The replies in the screenshot aren't replies. Forgot to reply ;)

RTBC from me pending IE testing.

IE6-IE9 ==> OK

Great, awesome to have this fixed before release.

Committed to HEAD!