Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Sprite problem

Posted on 2014-09-25
6
Medium Priority
?
129 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
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

916 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