Script is working great in firefox, IE, and Chrome but not in Safari?

[Presto-X]

Hello everyone,

 

I'm stumped, my script works great in firefox 8, IE9, and Chrome 16, but it does not work in IE7-8 or Safari 5.1.2, what am I missing?  This is driving me crazy any help would be much appreciated.

 

What I'm trying to do is make a list function like a form select so I have the ability to style to fit our needs.

 

<div class="recipients" id="recipients">
  <ul>
    <li>
      Choose Recipient
      <ul>
        <li onclick="recipient('test_user_1','recip_0');"><span id="recip_0" class="selected">Test User 1</span></li>
        <li onclick="recipient('test_user_2','recip_1');"><span id="recip_1">Test User 2</span></li>
        <li onclick="recipient('test_user_3','recip_2');"><span id="recip_2">Test User 3</span></li>
        <li onclick="recipient('test_user_4','recip_3');"><span id="recip_3">Test User 4</span></li>
        <li onclick="recipient('test_user_5','recip_4');"><span id="recip_4">Test User 5</span></li>
      </ul>
    </li>
  </ul>
</div>
<input type="text" name="recipient" id="recipient" value="" />

<script type="text/javascript">
function recipient(recip,ID) {
var spans = document.getElementById('recipients').getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
	spans[i].style.color = "#999999";
	spans[i].style.background = "none";
}
document.getElementById('recipient').value = recip;
document.getElementById(ID).style.background = "url(templates/designpoint/images/checkmark.png) no-repeat 8px center #212121";
document.getElementById(ID).style.color = "#8b964d";
}
</script>