problems with background position

My question is why I can't go futher on the gif and select position: -60px. I've been trying with any lucky... any suggestions? I wanted to show you this on jsFiddle but dont know how to upload gif to the site.

<div id="container">
  <div id="mainContent">
    <h1> Main Content</h1>
        <div id="icon">

          <a href="#row_01" title="01A">01A</a>    </div>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

CSS

#icon a
{
    background-image: url(../img/icon.gif);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    display: block;
    overflow: hidden;
    text-indent: -99999px;



    width: 30px;
    height: 30px;
}

#icon a:hover, #icon a:focus
{
    background-position:  -30px 0;
}

#icon a.selected, #icon a.selecte开发者_JAVA技巧d:hover

{
    background-position:  -60px 0;
}

There is no problem, as long as the image actually is at least 90 wide.

Here is your code with a placeholder image, and code that toggles the selected class when you click on the image:

http://jsfiddle.net/wwRed/