Good Afternoon,
Although I can edit CSS I don’t truly understand all of the in’s and out’s which is hindering my ability to work with my new sprite. I am assuming it is something very simple and was hoping that someone could take a look and let me know what I am missing.
This is the code I placed into my custom.css
#container li {
background: url(../../../images/typography/hotitworks.png) no-repeat top left;
}
steps.sprite-dollar-sign{ background-position: 0 0; width: 128px; height: 128px; }
steps.sprite-home-move{ background-position: 0 -178px; width: 128px; height: 128px; }
steps.sprite-movingtruck5{ background-position: 0 -356px; width: 128px; height: 128px; }
steps.sprite-next-arrow{ background-position: 0 -534px; width: 30px; height: 60px; }
This is the code I used in the design
<ul class="steps">
<li class="sprite-dollar-sign"><br></li>
<li class="sprite-home-move"><br></li>
<li class="sprite-movingtruck5"><br></li>
<li class="sprite-next-arrow"><br></li>
</ul>
I also tried the ul class as “container” and <div class=“container”> followed by <"ul class=“steps”> with no luck.
PS - Yes, the background image it is calling has been uploaded and that is the correct directory 
try:
.steps .sprite-dollar-sign{ background-position: 0 0; width: 128px; height: 128px; }
.steps .sprite-home-move{ background-position: 0 -178px; width: 128px; height: 128px; }
.steps .sprite-movingtruck5{ background-position: 0 -356px; width: 128px; height: 128px; }
.steps .sprite-next-arrow{ background-position: 0 -534px; width: 30px; height: 60px; }
what you missed was the ‘.’ before steps (dot is prefix for class) and a space between .steps and .sprite… (the space means must be a decendant of the first)
.steps .sprite-next-arrow
means: every element within an element with class name ‘steps’ that has the class ‘sprite-next-arrow’
you wrote
steps.sprite-next-arrow{ background-position: 0 -534px; width: 30px; height: 60px; }
means: every ‘steps’ element ( the html <steps> tag , doesn’t exist) that has the class ‘sprite-next-arrow’
see:
CSS Selectors
for moor info
PS: welcome to Sitepoint bscivolette!
Awesome, thank you. So the error was in the CSS style and not in how I called it to the front end? In other words, if I fix the CSS code as you described my <ul class> and <li class> should work as I previously had it?
yes they should if your coordinates (background-position) is correct.
and if your li’s are in an element with ID container (not required to be direct child) to call your image
Appreciate the feedback. Although I made the changes to the CSS as recommended (and cleared the cache) I am still not getting the sprite to show up. I used a sprite generator site which is how I got the coordinates, is there a way to test the coordinates? I have Photoshop and Fireworks but the X and Y doesn’t appear to be related to what I see in the code.
Sure, sorry I should have listed it previously. I have it setup for testing on a very low traffic and old page. You can currently see four bullet points at the bottom of the content, I am assuming from the <li> tag.