57

The score for the 4 questions are 111, 1218, 261 and 5 respectively, but they display 2 digits per line. This is an obvious bug in design.

14
  • 6
    The padding of everything is kinda all over the place right now (I think). I trust that as soon as things have stopped happening the team will have time for cosmetic fixes without us enumerating all of them.
    – badp
    Apr 17, 2014 at 1:18
  • I've reproduced in other sites as well, just that right now I don't remember where..
    – Braiam
    Apr 17, 2014 at 1:50
  • @Braiam simply use the browser inspector and try to change a 0 to 9999
    – badp
    Apr 17, 2014 at 2:00
  • 1
    Linking to a highly voted post so we can see a live example in the "linked" section here.
    – Lix
    Apr 17, 2014 at 10:23
  • 1
    It looks even sillier for questions with a four-digit vote total. Large negative totals don't looks so great either. Apr 20, 2014 at 20:05
  • Looks cool if you set #sidebar .answer-votes width:40px Apr 23, 2014 at 22:37
  • if it crosses 9999, the 5th digit won't even appear!! this is crazy. But I think even Jon Skeet hasn't crossed that score. Allthough he has displaced quite a few things on SE... Apr 26, 2014 at 12:40
  • 1
    Same issue at TeX & LaTeX - see this question (image) and this meta post.
    – senshin
    May 3, 2014 at 21:58
  • @AwalGarg Not quite yet, but we're getting there...
    – Izkata
    May 7, 2014 at 2:34
  • @Izkata If answers were shown the same way, we would have been puzzled... May 7, 2014 at 4:23
  • 1
    Somewhat ironically, this problem seems to also occur on User Experience. May 27, 2014 at 14:07
  • 1
    This appears to be fixed now, though 4 digits still cause a problem. Can't eat the cake and leave it whole! ;( Jun 5, 2014 at 14:37
  • 1
    @ShadowWizard A negative sign and 3 digits (like this question) also looks weird Jun 10, 2014 at 3:59
  • And note that you shouldn't need to reinvent the wheel, Stack Overflow works well with this already.
    – Mark Hurd
    Jun 25, 2014 at 1:55

2 Answers 2

18

I suggest taking some advice from the user-profile tags page in terms of how large numbers are handled:

enter image description here

It allows for 3 characters easily, with abbreviations for 1000+ (k for 1,000+, m for 1,000,000+, ...). Some consideration is required for (large) negative scores though. While colouring (say red) is an option, it may be confusion/not immediately apparent to users.

1
8

The line wrapping problem is easily fixed just by forbidding it in CSS:

.answer-votes { white-space: nowrap }

(Yes, the class name for those vote counts is answer-votes, even though the links are to questions, not answers. Go figure.)

This mostly fixes the problem for three-digit scores, but four-digit scores will overflow the box reserved for them, and run into the question title. For that matter, even for three-digit scores the fit's kind of tight.

As it turns out, the meta.SE style sheet already has rules for increasing the box width and reducing the font size for three- and four-digit scores. However, they do nothing (in the sidebar, anyway), because they're overridden by other rules tagged as !important.

Just adding the !important attribute to those rules helps a bit, but doesn't really look as good as it should, presumably because those rules are really remnants of whatever earlier style sheet the meta.SE style was based on. Based on some testing, though, the following rules look pretty good:

#sidebar .answer-votes.large { width: 32px !important }
#sidebar .answer-votes.extra-large { font-size: 11px !important; width: 32px !important }

With the extra styles above, the linked questions side bar for this question looks like this:

Screenshot

I'll be adding the CSS fixes above to the next version of SOUP, assuming that these styles don't get fixed before it's released. Those feeling adventurous can go grab the development pre-release version, which already includes this fix, from the GitHub repo here.


Ps. The existing .answer-votes.large and .answer-votes.extra-large styles do have an effect on the user profile answers tab, where these classes are also used. Alas, it's not really a good effect — they just mess up the vertical padding for no good reason. To fix this, the SOUP development version also includes the following extra rule:

.user-show-new .answer-votes { padding: 4px 4px 5px !important }

Really, the best solution would be to throw out the current broken .large and .extra-large styles entirely, and rewrite them from scratch to look something like the styles above.

1
  • 2
    Looks like the first part of the fix suggested here (white-space: nowrap) has been implemented (here on meta.SE, at least; some other sites are still broken), but the width adjustment hasn't been, so large scores still overflow their boxes. Jun 27, 2014 at 22:05

You must log in to answer this question.

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