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

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;
}
share|improve this question
12  
<3 bug reports that include solutions. –  Joel Coehoorn Aug 20 '09 at 20:14
1  
How about a screenshot to demonstrate the issue? –  GEOCHET Aug 20 '09 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 '09 at 20:14
    
@Pesto: Agreed, time to fork some code!!! –  GEOCHET Aug 20 '09 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 '09 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 '09 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 '09 at 20:23
1  
Just tilt your head slightly to the side... now its all good. –  Alconja Aug 21 '09 at 3:34

9 Answers 9

up vote 2 down vote accepted

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!

share|improve this answer
    
You're right. I've updated the original question with an improved CSS solution. –  user134282 Aug 21 '09 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 '09 at 1:46
    
I don't think we're talking about the same thing, Isaac. –  Jeff Atwood Aug 29 '09 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 '09 at 1:51
    
It looked better before, now the arrows look really sloppy. –  deleted Sep 5 '09 at 1:52
    
Wow, you seem to have fixed it. Thanks. –  deleted Sep 11 '09 at 1:46

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.

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

You can really see it when it's blown up:
bad upvote!
It hurts my eyes :)

share|improve this answer
6  
Thanks a lot - now I can't unsee it! –  Kyle Cronin Aug 21 '09 at 4:32

Chrome 2.0.172.39 on Windows - Arrows don't line up

share|improve this answer
    
Agreed. –  ajm Aug 20 '09 at 21:34

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

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

share|improve this answer
    
Firebug cheater! –  Ladybug Killer Aug 21 '09 at 12:22
    
@John Smithers: Nope, good ol' text editor and a locally saved copy. –  balpha Aug 21 '09 at 12:28
1  
Don't say Notepad! –  Ladybug Killer Aug 21 '09 at 12:36
1  
...++ . –  balpha Aug 21 '09 at 12:39
    
Phew! My worries were unfounded. –  Ladybug Killer Aug 21 '09 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 '09 at 19:48
    
@aschall: That's why I said "don't remove it, but add an additional one". –  balpha Aug 22 '09 at 7:16

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;
}
share|improve this answer
    
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 '09 at 22:59

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 ...

share|improve this answer
    
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 '09 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 '09 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 '09 at 20:45
1  
@John: Well, to be fair, all of my posts are crooked and evil. –  GEOCHET Aug 20 '09 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 '09 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 '09 at 20:55
1  
@John Rudy: THE INTERNET IS SERIOUS BUSINESS –  GEOCHET Aug 20 '09 at 20:56
    
@Rich B: Hold, I'll be right there. Someone is wrong on the internet! (Erm, oh, wait.) –  John Rudy Aug 20 '09 at 21:08
    
Re the image answer I had before: Those who downvoted were correct; I deleted said answer. –  John Rudy Aug 22 '09 at 16:12

Firefox 3.5.2 on Ubuntu. Arrows Line up!

share|improve this answer

Firefox 3.0.15 Mac -- arrows line up.

share|improve this answer

You must log in to answer this question.