change background image position on mouseover

i have this working in all target browsers…except IE

so, i have a table…

[code]<div id=”gameslist”>
<table>
<tr>
<td>home team</td>
<td>home score</td>
<td>away score</td>
<td>away team</td>
</tr>
<tr>…
</table>
</div>[/code]

…and a function…

[code]function setmouseover() {
var rows=document.getElementById(‘gamelist’).getElementsByTagName(‘TR’);
for(var i=0; i<rows.length; i++) {
if(rows[i].className==’off’) {
rows[i].onmouseover=function() {this.style.backgroundPosition=’-300px 0′}
rows[i].onmouseout=function() {this.style.backgroundPosition=’0 0′}
}
}
}[/code]

in my stylesheets i’ve already set a background image for the <tr> tags and this is supposed to just move the image position for a rollover effect. It’s working everywhere but microsoft’s wonderful browser of course. Any hints on making this IE friendly without breaking it for other browsers?

thanks!

Also in #JavaScript _↴