What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 133 Stack Exchange communities.

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.

share|improve this question
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 at 1:18
    
I've reproduced in other sites as well, just that right now I don't remember where.. –  Braiam Apr 17 at 1:50
    
@Braiam simply use the browser inspector and try to change a 0 to 9999 –  badp Apr 17 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 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. –  Ilmari Karonen Apr 20 at 20:05
    
Looks cool if you set #sidebar .answer-votes width:40px –  Ashley Medway Apr 23 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... –  Awal Garg Apr 26 at 12:40
1  
Same issue at TeX & LaTeX - see this question (image) and this meta post. –  senshin May 3 at 21:58
    
@AwalGarg Not quite yet, but we're getting there... –  Izkata May 7 at 2:34
    
@Izkata If answers were shown the same way, we would have been puzzled... –  Awal Garg May 7 at 4:23
1  
Somewhat ironically, this problem seems to also occur on User Experience. –  Ilmari Karonen May 27 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! ;( –  Shadow Wizard Jun 5 at 14:37
1  
@ShadowWizard A negative sign and 3 digits (like this question) also looks weird –  Dennis Meng Jun 10 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 at 1:55

2 Answers 2

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.

share|improve this answer

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.

share|improve this answer
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. –  Ilmari Karonen Jun 27 at 22:05

You must log in to answer this question.

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