28

It's just a minor CSS issue. See the following gif:

Improve this question
8
  • 10
    A bit off-topic, but: could I ask what software you used to make that gif? It really looks quite nice.
    – senshin
    Apr 24, 2014 at 4:58
  • 8
    I am on a Linux machine running Ubuntu 14.04. and I used byzanz-record. I created my own byzanz-record GUI wrapper, that I shared on my GitHub account. But here you will find a shell script that is very easy to use after installing the dependencies.
    – Ionică Bizău
    Apr 24, 2014 at 9:20
  • 1
    @IonicăBizău: Wow. That is AWESOME. I've been looking for something like that for ages. Thank you!
    – Amal Murali
    Apr 24, 2014 at 17:48
  • 1
    @AmalMurali You're welcome. :-)
    – Ionică Bizău
    Apr 24, 2014 at 18:16
  • 1
    Start bounties to repro.
    – Himanshu
    May 7, 2014 at 11:35
  • 1
    @hims056 Opened on this question.
    – Ionică Bizău
    May 7, 2014 at 12:02
  • Still an issue…
    – Ry-
    Jul 23, 2014 at 0:07
  • LOL @ the petting the button.
    – CRABOLO
    Sep 30, 2014 at 0:56

2 Answers 2

Reset to default
2

This has been resolved as part of design overhaul MSE went through not long ago. Now both normal and hovered states have blue square background of the same size, as it should be.

Improve this answer
11

Looks like the problem is that there class .bounty-vote-off, which is used to style the un-awarded bounty button when you're not hovering the cursor over it, has an extra padding: 2px 4px 3px style that doesn't match the padding: 0.2em 0.5em style for the .bounty-award class.

Simply removing the padding style from .bounty-vote-off should fix this bug.

Ps. I'm pretty sure this also affects several other SE sites besides MSE, including (at least) the recently graduated Academia.SE and graphicdesign.SE.

Actually, the real cause of this bug seems to be that the bounty icon styling on this site (and on Academia / Graphic Design / etc.) is a Frankenstein hybrid of two entirely different styles:

SOFU style (SO):

Awarded bounty icon on Stack Overflow Unawarded bounty icon on Stack Overflow

Beta style (crypto.SE):

Awarded bounty icon on beta Stack Exchange site Unawarded bounty icon on beta Stack Exchange site

Frankenstein style (meta.SE):

Awarded bounty icon on Meta Stack Exchange Unawarded bounty icon on Meta Stack Exchange

Frankly, I suspect that whoever designed these stylesheets simply started from the beta styles and tweaked them to look more like SO, but forgot to modify or test the unawarded bounty appearance.

Ps. Looks like the CSS fix included in the Stack Overflow Unofficial Patch user script for this related design issue also fixes this bug as a side effect.

Improve this answer

You must log in to answer this question.

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