Here's my code:
<ul class="items">
<li class="product1"><a href=""><span>Televisions</span></a></li>
<li class="product2"><a href=""><span>Networked Computer Stoarge</span></a></li>
</ul><!--end items-->
If you can imagine the href being a circular icon, I am trying to position the <span> content directly to the left of the icon: Televisions(icon)
My CSS:
#ir-content ul{list-style-type:none !important;}
#ir-content ul.items li{position:absolute;}
#ir-content ul.items li a{background:url(../images/rooms/dollar-sign-sprite.png) no-repeat 9px 10px;width:55px;height:53px;display:block;color:#636363 !important;position:relative;}
#ir-content ul.items li a:hover{background-position:0 -135px;text-decoration:none !important;}
#ir-content li a span{margin:0;padding:6px 20px 6px 0;background:url(../images/rooms/product-title-bg.png) no-repeat right top;position:relative;left:-100%;top:18px;}
Update: Here's a fiddle:
Notice how I can get it almost fully to the left of the icon, but there's still some overlap.
Relative/absolute positioning fiddling: http://jsfiddle.net/pKnXA/2/