SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Help fix Sprite images right side didn't hide

    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/

    Code:
    .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;}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Quote Originally Posted by ralph.m View Post
    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:
    Code:
    <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/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by alouty View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •