Half my CSS Sprite images not displaying - html

Question

I have a table of roll over images / links, for which I was hoping to use a sprite for but for some reason when the code goes live only around half of the images display.
My code is here if anyone wants to look at it in the wild:
http://www.geckosourcing.co.uk/ebay/Promotions/Cross_Promotion.html
http://www.geckosourcing.co.uk/ebay/Promotions/Cross_Promotion.css
HTML:
<td height="88" width="88"><a class="1000AQwpanel" href="http://goo.gl/mOu8L">1000 Wetroom Panel</a></td>
CSS:
.1000AQwpanel {
display: block;
width: 88px;
height: 88px;
background: url('http://www.geckosourcing.co.uk/ebay/Promotions/Promotion_Sprite.jpg') -704px 880px;
text-indent: -99999px;
}
.1000AQwpanel:hover {
background-position: -704px 792px;
}
The think that has been getting me as this code looks the same as the sections that work. If anyone can show where I am going wrong it would save me pulling my hair out.
Thanks

Answer 1

I suspect this is due to class names that start with a number:
class="760Corner"
Valid class names must begin with a letter, underscore or hyphen.

Answer 2

class / id names may not start with a number. Html wil valid the code, it's the css that gives the problem.
You can use a different style of css to go around this.
css
a[class="760corner"]{
}
PS.
Why do you have the text inside your image? Try putting text in a span like this
HTML
<a class="corner-760">
<span>Your text</span>
</a>
css
a {
display: block;
position: relative;
background: url('../images/.....jpg');
width: 80px;
height: 80px;
}
a > span {
display: block;
text-align: center;
height: 100%;
}
a:hover > span {
display: none;
}
a.corner-760 {
background-position: ........;
}