Help fix Sprite images right side didn't hide

[alouty]

I have 2 sprite images. 1st is ok which is vertical only. 2nd not ok. The right side image didn't hide. I was told to give at least 1px space and I did it to Photoshop image.

What is wrong with it? Is html code mistaken?

http://fiddle.jshell.net/6TaQt/46/

.white_box ul li a.web_des2 {background: url(http://www.bestjob.my/mod/CSS/sprites/Sprites_main.png) no-repeat;background-position: -147px -60px;width: 27px; height: 26px;}
.white_box ul li a.web_dev2 {background: url(http://www.bestjob.my/mod/CSS/sprites/Sprites_main.png) no-repeat;background-position: -147px 0;width: 27px; height: 26px;}
.white_box ul li a.cms2 {background: url(http://www.bestjob.my/mod/CSS/sprites/Sprites_main.png) no-repeat;background-position: -147px -30px;width: 27px; height: 26px;}
.white_box ul li a.seo2 {background: url(http://www.bestjob.my/mod/CSS/sprites/Sprites_main.png) no-repeat;background-position: -147px -92px;width: 27px; height: 26px;}

[ralph.m]

Yes, the problem is that the links are quite wide, giving space for all the other stuff in the sprite image to show. If you want to keep that image, you'd need to place something like a span inside the <a> with a set width and height, so that nothing else in the image has room to show.

[alouty]

Yes, the problem is that the links are quite wide, giving space for all the other stuff in the sprite image to show. If you want to keep that image, you'd need to place something like a span inside the <a> with a set width and height, so that nothing else in the image has room to show.

I have made change:

<li><a href="/registration/?user_group_id=JobSeeker"  class="web_des2"><span style="width:1px;height:20px" >Register</span></a></li>

'Register' now can shown full but still can see hide image.
http://fiddle.jshell.net/6TaQt/49/

[ralph.m]

but still can see hide image.

I think you missed the point. Your sprite image has a lot on it, and your links are quite wide, so you will see as much of the sprite image as can fit inside the background of the link. So if you want to keep the sprite image as is, you need to lock down the areas where it can appear. So if you want to show an icon that's, say, 20px x 20px, then put it on a span or similar element that is locked down to that width and height.