Solved

Sprite problem

Posted on 2014-09-25
6
119 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
javascript comparing two dates 3 17
Best way to minify CSS with out breaking it 7 35
CSS: Making Pure CSS read more boxes thinner 5 29
Javascript Form Change 5 13
Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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).

813 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now