UI Icons are not even, causes misaligned buttons

[epascarello]

Place an East and West arrow icon side by side. When you look at the arrow icons you will see they are all on a different y axis. Seems like they were rotated on a wrong central point.
.ui-icon-triangle-1-e
.ui-icon-triangle-1-w

You can see an example on the Grid mock-up: ​http://jquery-ui.googlecode.com/svn/branches/dev/grid/tests/static/grid/default.html

I attached a blown up version showing how off the arrows are when looking at ui-icons_222222_256x240.png.

As a temp fix, the CSS can be adjusted so the sprite is lined up correctly.

[epascarello]

The changes andreas made to the buttons appears to fix the alignment issue with the east/west arrows.

When checking this, I noticed that the North and South arrows .ui-icon-triangle-1-n .ui-icon-triangle-1-s and not centered in the x direction. It appears that the width can not be divided evenly in the icon width.

[andreas]

Replying to epascarello:

The changes andreas made to the buttons appears to fix the alignment issue with the east/west arrows.

When checking this, I noticed that the North and South arrows .ui-icon-triangle-1-n .ui-icon-triangle-1-s and not centered in the x direction. It appears that the width can not be divided evenly in the icon width.

The east/west aren't vertical aligned either because of icon height.

[scottjehl]

fixed in revs 1001,1002,1003 in website svn

[nic.austin]

I still see in 1.8.2 that the North and South arrows are not horizontally aligned

[banzor]

Replying to scott.gonzalez: This issue is noticed in ui-icon-bullet as well. Maybe all icons should be eval'd to see which ones have an odd px width of their inner graphic. Can we help in any way? I might be able to check all of them if you want.

[Scott González]

Replying to banzor: Unfortunately the source for the sprite is in a private repo for ThemeRoller. We're hoping to open it up after the rewrite. I think this may have actually been addressed already, but we haven't moved to the new icon sprite yet.

[k_borchers]

Replying to scott.gonzalez: Any progress on this? I am running into the ui-icon-bullet issue now when working on Menu since it doesn't align with ui-icon-radio-off to use it as the checked radio button.

[cameron]

Still noticed this problem in 1.8.16 for ui-icon-triangle-1-s... it's currently listed as: .ui-icon-triangle-1-s { background-position: -64px -16px; } and should be .ui-icon-triangle-1-s { background-position: -65px -16px; }

Going to override it, but would be nice if it was correct in the style sheet.

[rdworth]

The position values in the css are correct as the sprite image is made up of 16px by 16px cells. It's the image date itself that needs adjusting. As you found, this override is a reasonable workaround in the meantime.

[drknoxy]

Downloaded the latest github jquery-ui and checked the images. This issue has been fixed if these icon images are the only source files for theme rolling.

[bthurber]

It seems even in latest github that the N/S images aren't going to align properly. Either N needs to move one pixel to the Right or S needs to move one pixel to the Left OR new images will need to be created that take the same amount of pixels on either side.

[Scott González]

At this point, I think this is a won't fix. We'll just need to make sure the new CSS framework doesn't have these issues.