16

Well, you can see it for yourself. The badge multiplier is a bit misaligned. Can you fix this please? (I know it's kinda a minor issue but it's bugging me and it's somehow off)

If it helps, I'm using Chrome version 44.0.2403.125 m. (Also repro'ed on FireFox 39.0 and FireFox 24.0)


For no good reason, that's a screenie from Kevin Montrose's profile page.

  • 3
    Repro'd on Ubuntu 14.04 on Firefox 39.0 and Chrome 44.0.2403.125 x64. – jimsug Aug 2 '15 at 12:18
  • 4
    Also repro'd it on Chrome 43 & Opera under Windows 8.1 – Sergey Litvinov Aug 2 '15 at 12:26
  • 2
    @inɒzɘmɒЯ.A.M AHHH - I was looking in the wrong place! I can repro! +1 :).. I kind of ignored your scrrenshot! :/ – ᔕᖺᘎᕊ Aug 2 '15 at 12:30
  • 5
    @ᔕᖺᘎᕊ Here is a screenshot from Safari 8 on Mac OS X Yosemite. – Damkerng T. Aug 2 '15 at 12:41
  • Probably having more than one of those rare badges is so rare, they didn't have chance to test this. :-) – Shadow The Curly Braced Wizard Sep 19 '15 at 13:23
7

Upon doing the inspect element on Kevin Montrose's profile Badges count, I see the relevant HTML code as:

<li>
        <a href="/help/badges/37/populist?userid=130213" title="gold badge: Highest scoring answer that outscored an accepted answer with score of more than 10 by more than 2x" class="badge"><span class="badge1"></span>&nbsp;Populist</a>
            × <span class="earned-count">2</span>
        <span class="badge-date">aug 29 '12</span>
</li>

Whereas, when I compare that to Anna Lear's profile I see:

<li>
    <a href="/help/badges/59/support?userid=155160" title="gold badge: Earn at least 1000 total score for at least 200 non-community wiki answers in the support tag" class="badge-tag"><span class="badge1"></span>&nbsp;support</a>
    <span class="badge-date">apr 3 '13</span>
</li>

I do not see the × <span class="earned-count">n</span> element for the three of the currently listed badges under the Gold section. I also checked if it has something to do with "Populist" badge. Anna does have a Populist (x 2) badge on her profile. So, that's not the case here.

I did a check on few other top ranked users profile (Shog9, Oded, and few others) where the count was not shown for the badges. But then, I found Monica Cellio's profile where the badge count is displayed next to it. I can't tell what kinda algorithm is used here. It's a mystery for sure.

As for the mis-alignment goes, yes OP is correct. It can be fixed by adding vertical-align: middle; to the below CSS code.

.badges-content .rarest .badges-list .badge, .badges-content .rarest .badges-list .badge-tag {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

-OR-

body.user-page #content * {
    box-sizing: border-box;
    vertical-align: middle;
}

There might be another better way to achieve this as CSS can do many wonders to a design. But that's what I can think as of now. Although adding vertical-align: middle; has solved the alignment issue but it might have other drawing implications somewhere else. I didn't experiment much. I would leave this to SE's UI/UX team for further experiment.

I am on MacBook Pro OS X Yosemite Ver. 10.10.4. I can reproduce this alignment error in my Chrome (Version 43.0.2357.134 (64-bit)) and Firefox (Version 39.0).

The below is the screenshot of Safari Version 8.0.7 (10600.7.12). This is a default view i.e. no changes made to the CSS code. The alignment works perfectly here.

enter image description here

  • 1
    Thanks for the sanity check. ;) – Marshmallow Aug 2 '15 at 12:25
  • @inɒzɘmɒЯ.A.M The alignment is perfect on Safari Version 8.0.7 (10600.7.12) on Mac OS X Yosemite Ver. 10.10.2 – HackerKarma Aug 2 '15 at 12:50
  • 6
    . . . which is one the biggest mysteries of IT industry. Seriously, how in the world is it aligned well on SAFARI?! – Marshmallow Aug 2 '15 at 12:51
  • @inɒzɘmɒЯ.A.M See my updated answer. I added CSS code to fix the issue. – HackerKarma Aug 2 '15 at 13:30
  • It seems that in your fix, the date (float:right) is now misaligned. – Bergi Aug 6 '15 at 17:40
  • @Bergi I just tried in Chrome the first option and vertical-align works. Could you upload a screenshot at imgur and link here. Also, if you notice I did put a note about "Although adding vertical-align: middle; has solved the alignment issue but it might have other drawing implications somewhere else. I didn't experiment much. I would leave this to SE's UI/UX team for further experiment" – HackerKarma Aug 6 '15 at 17:47
  • @HackerKarma: It's visible in your own screen shot already :-) The date (a floating block) is top-aligned, higher than the multiplier text. Try my solution from here – Bergi Aug 6 '15 at 18:03
  • @Bergi that's the original screenshot from Safari without the "vertical-alignment" CSS code change. You can take a look if you have a Safari browser. – HackerKarma Aug 6 '15 at 18:05
  • 1
    @HackerKarma: Ah, right. Yeah, that's exactly how it looks in the other browsers with the vertical-alignment applied for the .badge. Just saying that the date is (has always been) misaligned, and that it should be on line with the multiplier. – Bergi Aug 6 '15 at 18:08
  • @Bergi I guess someone may have to post a feature-request for "date misalignment" too – HackerKarma Aug 6 '15 at 18:12

You must log in to answer this question.

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