css sprite : div h2 title image with ul li - css

Question

I am using SpriteMe for my webpage and have code below. The problem is it show full sprite image instead of single image inside it.
<div class="white_box">
<div class="white_box_top_JS" style="background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); border: 2px solid red; background-position: -279.5px -10px; ">
<h2>Job Seekers</h2>
<ul>
<li>
Register
</li>
</ul>
</div>
</div>
I have read and followed <ul> Sprite Issue but can't get it.
http://jsfiddle.net/6TaQt/30/

Answer 1

It is best to stay away from inline style whenever possible. Additionally, the li element should receive the sprite, not the anchor. Here is a start on the relevant changes:
(also in a forked fiddle )
HTML:
<ul>
<li id="register">
Register
</li>
<li id="post">
Post resumes
</li>
<li id="find">
<a href="/find-jobs/" class="seo" >Find jobs</a>
</li>
<li id="get">
Get jobs by email
</li>
</ul>
CSS:
#register { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -1315px -6px; }
#post { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png) ;
background-position: -1360px -6px; }
#find { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -685px -5px; }
#get { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -544px -6px; }