Question

I am currently having problems with icons i am placing inside my nav menu for the tabs. I used an online image css sprite creator and it worked well. The issue is now the picture are showing up incorrectly. How can i fix this issue? Here is my EXAMPLE
HTML

<ul>
<li><a href="#tab-1" class="pngIcon sprite-category">1. Category</a></li>
<li><a href="#tab-2" class="pngIcon sprite-description">2. Description</a></li>
<li><a href="#tab-3" class="pngIcon sprite-images">3. Images</a></li>
<li><a href="#tab-4" class="pngIcon sprite-contact">4. Contact Info</a></li>
<li><a href="#tab-5" class="pngIcon sprite-final">5. Final</a></li>
</ul>

CSS I got the coordinates from the website that made the css sprite image

.sprite-final{  background-position: 0 0; width: 32px; height: 32px; } 
.sprite-category{ background-position: 0 -82px; width: 32px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; width: 32px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; width: 32px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; width: 32px; height: 32px; }


.pngIcon {
    padding: 0;
    background: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png) no-repeat top left;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}

CSS Sprite Image

Answer 1

sprites are meant for backgrounds only. remove the img tags for starters.
then add the .sprite-Final, ... classes directly to the a tags
also add a class pngIcon to each of the anchors (not as an #id, an id can only occur once per page!)
then update your css as follows:

.pngIcon {
    padding: 0;
    background-image: url(images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}

I think that should do the trick…