• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 131
  • Last Modified:

Sprite problem

I have two pages with similar code and the same CSS. On
the first page

http://www.housecarers.com/test3/how.cfm
The House Icon is fine

on a similar page using the same css
http://www.housecarers.com/test3/how2.cfm
The house has a yellow line above it

Cant work out why this is so. Please help.

Thanks Ian
0
Ian White
Asked:
Ian White
  • 4
  • 2
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
Adjust the css class to:
.house-icon {
background-position: left -664px;
height: 22px;
line-height: 22px;
}

Open in new window

This is a common problem with sprites when there's no space between the images.
This is also easily reproducible if you use the browser zoom.
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
You can also consider using my Sprite Creator tool (GitHub)to generate your sprite.
You won't have that problem.
0
 
Ian WhiteOwner and FounderAuthor Commented:
I noticed it was happening with chrome on one computer - I cleared that cache and tried again - no problem. I tried on another computer with chrome and it was ok.  Once it happened on the first computer - it kept happening. Ok I will
have a look.  The code was created by a designer now gone - so as I am not that tech I have to stick with it. I will take a look at your suggestion
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Alexandre SimõesManager / Technology SpecialistCommented:
To avoid this and other kind of problems I always require the designers to give me the images in separated files then I use this tool to generate the sprite.

This procedure also lets you:
- easily add images to the sprite later on without any problem or regression
- optimize automatically the sprite image size
- even integrate the sprite generation in the build process

Cheers!
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks, the change is CSS did not do anything. However it must be a corruption on one computer and firefox chrome only - the other computer is fine. Beats me. So I will close this - it is some weird problem with one computer. Any kudos to you for your tools. My site is already designed so wont be using them
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
For me, in Chrome it solved to push the bg image 1px up.
This is easy to see in any browser if you zoom out to 90 or 85%.

For the next sprites, to avoid this, ask the designers to leave 1 transparent pixel all around each image.

Cheers!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now