53

The snapshot should be self-explanatory. The per-badge count (× 3) is misaligned. Is this a bug?

Seen on Chrome 43+, on Windows 7.

Misaligned badges screen-shot


Additional: The profile page from which the snapshot is taken.


Update on 06-Aug-2015:

As per the comments, it's repro on

  • Firefox 39.0
  • Chrome 44 (Win 10 / Mac)

A Cross-meta dupe


Update on 07-Aug-2015:

Repro on

  • IE 11.0.21
  • Microsoft Edge on Windows 10
20
  • 6
    Also an issue in Firefox 39.0. Only affects the badges on the Profile page, the badges section on the Activity page seems to be aligned correctly. Commented Aug 4, 2015 at 12:41
  • 8
    It's the same in Chrome 44 on Windows 10, the numbers are misaligned as seen in the OP's screenshot.
    – Cerbrus
    Commented Aug 4, 2015 at 12:57
  • Something recent? I was looking at @Yuret's badges on their profile yesterday and didn't notice it. Commented Aug 4, 2015 at 14:37
  • 3
    No repro here :)
    – KyleMit StaffMod
    Commented Aug 5, 2015 at 12:07
  • 4
    Seeing this in Chrome as well.
    – Cayce K
    Commented Aug 5, 2015 at 12:21
  • 1
    Yep just confirming that :D wouldn't be helpful if I said seeing this as well. (could be in firefox, safari, edge, ie, etc.. I don't feel like looking everywhere else :P)
    – Cayce K
    Commented Aug 5, 2015 at 12:25
  • 1
    But at the least this is a problem in Firefox 39 as well.
    – Cayce K
    Commented Aug 5, 2015 at 12:28
  • 4
    MSE dup
    – Spikatrix
    Commented Aug 5, 2015 at 12:39
  • 1
    @KyleMit You don't have any multipliers in your screenshot. Commented Aug 5, 2015 at 14:41
  • 5
    @NathanOliver, at the risk of explaining the joke, but at the benefit of clarity, I was being coy (thus the smiley face).
    – KyleMit StaffMod
    Commented Aug 5, 2015 at 14:47
  • 1
    This issue also occurs on Chrome for Mac OS.
    – intcreator
    Commented Aug 6, 2015 at 2:46
  • 1
    This also occurs on Microsoft Edge on Windows 10. Commented Aug 6, 2015 at 15:47
  • 2
    For any Stack Overflow engineers reading this, applying vertical-align: middle to the .badge element fixes it. Commented Aug 6, 2015 at 17:12
  • 1
    can confirm this in Firefox 39 on Windows 8.1
    – Mischa
    Commented Aug 7, 2015 at 9:50
  • 1
    Also confirmed on IE 11.0.21 running on Windows 7 Enterprise
    – Luuklag
    Commented Aug 7, 2015 at 9:55

1 Answer 1

6

Here's the necessary CSS fix:

.badges-content .rarest .badges-list .badge, .badges-content .rarest .badges-list .badge-tag {
    vertical-align: middle;
}
.badges-content .badge-date { 
    padding: 0.4em 0px; /* we don't want to have that mis-aligned either
                           padding matches the one of the .badge (inline-)block */
}

The badges tab on the activity page does look as expected because the badges are displayed in a table there, where a middle alignment is the default. Btw, for consistency you might want to wrap the "× 3" in a <span class="item-multiplier">, <span class="item-multiplier-x">, <span class="item-multiplier-count"> like everywhere else.

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