Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Sprite problem

Posted on 2014-09-25
6
Medium Priority
?
125 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

730 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