Question

I am currently using a sprite image for my tabs menu. The problem is that the images are showing but the title of each tab is not appearing at all. How can place the image and title inside the tab nicely? EXAMPLE

This what I am aiming for:

This what I am getting:

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>

postingtabs.css

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

Answer 1

Just delete width on .sprite-* selectors in your css file :

Your css:

.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; }

Working css:

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

Final Result: demo on dabblet

CSS code: (I have made some refactoring)

li a {
    padding: 0;
    background-image: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    padding: 0 5px;
    display: block;
    text-decoration: none;
}

.nav-category    { background-position: 0px -85px; }
.nav-description { background-position: 0px -248px; }
.nav-images      { background-position: 0px -327px; }
.nav-contact     { background-position: 0px -164px; }
.nav-final       { background-position: 0px 0px; }