13

The triangle voting images don't line up for me. Using Safari on Mac, they are two pixels different horizontally. Using Firefox on Mac, they are one pixel different.

Since the images are 40px wide, and the table cell that they are contained within is 60px wide, the following CSS should make everything all better:

.vote-up, .vote-down {
    display: block;
    padding-left: 10px;
}

Edit: As Jeff pointed out, this solution doesn't work once the vote count forces its table cell to expand in width.

Here's an improved CSS solution that seems to work better:

.vote-up, .vote-down {
    display: block;
    margin: 0 auto;
}
Improve this question
8
  • 12
    <3 bug reports that include solutions.
    – Joel Coehoorn
    Aug 20, 2009 at 20:14
  • 1
    How about a screenshot to demonstrate the issue?
    – GEOCHET
    Aug 20, 2009 at 20:14
  • 5
    Two pixels different? Jeff has some explaining to do. This slapdash code is getting out of hand.
    – Hilarious Comedy Pesto
    Aug 20, 2009 at 20:14
  • @Pesto: Agreed, time to fork some code!!!
    – GEOCHET
    Aug 20, 2009 at 20:15
  • 3
    Sure enough, I see the offset now that I look at it. Thanks for setting off my OCD......
    – squillman
    Aug 20, 2009 at 20:16
  • 3
    I didn't notice this until I read the question and really looked at it. Now I'm not going to be able to un-see it :(
    – EvilChookie
    Aug 20, 2009 at 20:20
  • The visual error doesn't appear to be caused through any fault of the current markup or CSS. Best as I can tell, the browsers just aren't lining things up right for whatever reason. This is just a workaround.
    – user134282
    Aug 20, 2009 at 20:23
  • 1
    Just tilt your head slightly to the side... now its all good.
    – Alconja
    Aug 21, 2009 at 3:34

9 Answers 9

Reset to default
2

The downside to the fix, although appreciated, is that the arrows are now FIXED, which means double and triple digit votes look exceptionally bad. (try it yourself if you don't believe me)

I agree that there's an offset (not sure why) in the bottom arrow; we need a css solution that lets them dynamically center.

Excellent. Thank you for this much needed CSS fix. That bugged me for a long time, too, but I had no idea what to do.

Deploying tonight!

Improve this answer
6
  • You're right. I've updated the original question with an improved CSS solution.
    – user134282
    Aug 21, 2009 at 19:42
  • It's not fixed for me. In fact, now even the voted arrows are off for me. Safari 4, Mac OS X Leopard.
    – deleted
    Aug 29, 2009 at 1:46
  • I don't think we're talking about the same thing, Isaac.
    – Jeff Atwood
    Aug 29, 2009 at 2:29
  • No, now even on biztravel, SuperUser, FogBugz Knowledge Exchange... they all look like this: img197.imageshack.us/img197/6391/arrows.tif Safari 4, Mac OS X Leopard...
    – deleted
    Sep 5, 2009 at 1:51
  • It looked better before, now the arrows look really sloppy.
    – deleted
    Sep 5, 2009 at 1:52
  • Wow, you seem to have fixed it. Thanks.
    – deleted
    Sep 11, 2009 at 1:46
3

Firefox 3.5.2 on Windows: Bottom arrow one pixel to the left.

Damn that's going to annoy me now - curse you, aschall!

Suggested workaround: Upvote or downvote every question and answer you look at. The arrows will be different sizes so you won't see the misalignment, and after about two and half minutes you'll run out of votes and have to go and do some work.

Improve this answer
2
  • @downvoter: Nuts, I should have expected that. 8-)
    – RichieHindle
    Aug 20, 2009 at 22:13
  • I wanted to upvote you yesterday but I was out of vote. But now +1 for the joke!
    – jjnguy
    Aug 21, 2009 at 13:25
2

Chrome 2.0.172.39 on Windows - Arrows don't line up

Improve this answer
1
2

You can really see it when it's blown up:
bad upvote! http://img256.imageshack.us/img256/807/badupvote.tif
It hurts my eyes :)

Improve this answer
1
  • 6
    Thanks a lot - now I can't unsee it!
    – Kyle Cronin
    Aug 21, 2009 at 4:32
2

There's a <br> tag between the down-arrow and the star. If you remove that, the arrows line up; but then the display is screwed up for large votes:

alt text http://img17.imageshack.us/img17/8042/votingarrowsdontlineupm.png

But if you add an additional <br> tag after the up-arrow instead of removing the other one, the arrows line up and everything looks fine.

Edit: When removing a typo in this answer, I had to answer this captcha:

alt text http://img269.imageshack.us/img269/5956/hittingtags.png

Improve this answer
7
  • Firebug cheater!
    – Ladybug Killer
    Aug 21, 2009 at 12:22
  • @John Smithers: Nope, good ol' text editor and a locally saved copy.
    – balpha StaffMod
    Aug 21, 2009 at 12:28
  • 1
    Don't say Notepad!
    – Ladybug Killer
    Aug 21, 2009 at 12:36
  • 1
    ...++ .
    – balpha StaffMod
    Aug 21, 2009 at 12:39
  • Phew! My worries were unfounded.
    – Ladybug Killer
    Aug 21, 2009 at 12:46
  • It does appear that the <br> element is indeed responsible. But since <img> elements are inline by default, it needs something to keep the next image from appearing on the same line.
    – user134282
    Aug 21, 2009 at 19:48
  • @aschall: That's why I said "don't remove it, but add an additional one".
    – balpha StaffMod
    Aug 22, 2009 at 7:16
2

Remove the <br> from under the down arrow, display the images as blocks and center using margin:0 auto. Remove the top margin of -5px from class favoritecount. Change the specificity for class vote-favorite and use a top margin instead of bottom.

.vote img {
   cursor:pointer;
   display:block;
   margin:0 auto;
}

.favoritecount {
   color:#808185;
   text-align:center;
}

img.vote-favorite {
   margin-top:10px;
}
Improve this answer
1
  • This is the same as my improved solution, but with extra stuff. It's true that the <br> can be removed as it no longer serves any purpose after styling the arrows as display: block.
    – user134282
    Aug 21, 2009 at 22:59
1

For the record, now that this set off my OCD as well, I swear to God I'm seeing a pixel difference in FF3.5 on Windows. The bottom arrow is one pixel to the left of the top.

I'd never noticed it until it was pointed out ...

Improve this answer
9
  • That's just the power of suggestion. If I tell you that the commas actually appear to be completely beneath the baseline of the text, you'll think you can see that, too.
    – Hilarious Comedy Pesto
    Aug 20, 2009 at 20:43
  • @Pesto: Oh sure, pick on the mentally ill. Real fair. They are victims of Apple's brainwashing, they can't help it!
    – GEOCHET
    Aug 20, 2009 at 20:44
  • I would say that, but I took a screen shot of Rich B's answer, dropped it in Paint.NET, magnified it to 600% and validated it by drawing a straight line up from the bottom arrow. Considered doing that in IE8, but I suspect it was just power of suggestion there.
    – John Rudy
    Aug 20, 2009 at 20:45
  • 1
    @John: Well, to be fair, all of my posts are crooked and evil.
    – GEOCHET
    Aug 20, 2009 at 20:45
  • I can't tell if Rich B is joking or not. Must be the mental illness that goes with being cross-platform. :)
    – John Rudy
    Aug 20, 2009 at 20:46
  • 1
    I see little commas underneath the number of views on the favorite cartoon question. Oh wait, maybe those are "k"s. Oh wait...
    – squillman
    Aug 20, 2009 at 20:55
  • 1
    @John Rudy: THE INTERNET IS SERIOUS BUSINESS
    – GEOCHET
    Aug 20, 2009 at 20:56
  • @Rich B: Hold, I'll be right there. Someone is wrong on the internet! (Erm, oh, wait.)
    – John Rudy
    Aug 20, 2009 at 21:08
  • Re the image answer I had before: Those who downvoted were correct; I deleted said answer.
    – John Rudy
    Aug 22, 2009 at 16:12
0

Firefox 3.5.2 on Ubuntu. Arrows Line up!

Improve this answer
0

Firefox 3.0.15 Mac -- arrows line up.

Improve this answer

You must log in to answer this question.