Solved

Sprite problem

Posted on 2014-09-25
6
123 Views
Last Modified: 2014-09-25
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
Comment
Question by:Ian White
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40343410
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40343413
You can also consider using my Sprite Creator tool (GitHub)to generate your sprite.
You won't have that problem.
0
 

Author Comment

by:Ian White
ID: 40343422
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
Independent Software Vendors: 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!

 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40343444
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
 

Author Comment

by:Ian White
ID: 40345235
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40345421
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question