Run into a conflict in CSS - degrees

Hi,
I wanted to make my images into sprites..
I have written these lines for one image:-

CSS:
a.lupper{float:left;display:block;background:url(/images/toffeln-sprite.png) no-repeat;background-position:-206px 0;width:36px;height:36px;margin:0 2px;}
a.lupper:hover{background-position:-206px -36px;}
HTML:
<a href="toffeln-healthcare-search.ghtml?keywords=lupper" title="Leather Upper" class="lupper">
</a>
Works perfectly.

Trouble is another one of my icons is for 50 degree washable.. which I have coded as 50deg in my database..

So this line of code (which is dynamically generated alongside the my first example) does not work:-
CSS:
a.50deg{float:left;display:block;background:url(/images/toffeln-sprite.png) no-repeat;background-position:-278px -72px;width:36px;height:36px;margin:0 2px;}
a.50deg:hover{background-position:-278px -108px;}
HTML:
<a href="toffeln-healthcare-search.ghtml?keywords=50deg" title="Washable 50 degrees" class="50deg">
</a>

Is there anyway to stop the CSS from recognising this as a degree value?
i.e. 50deg
I want it just to see 50deg as a name of a class.
Is there anyway of acheiving this without changing my codes in my database?

Thanks for your time.