I'm editing a script for multiple-correct questions (i.e. multiple choice with more than one correct answer) and have hit something that works correctly in Firefox but not in IE.

The basic question consists of check boxes e.g.
Code:
<p><input type='checkbox' class='checkbox' id="c1" value="1"><label>Is Mr Briers an existing customer?</label></p>
The judging script checks if they're correct, strips out the checkbox using DOM, and adds a tick to the text if correct. This is a background image.

The script goes:
Code:
function display(which) {
	// strip out check boxes whether right or wrong
	for (j=1;j<correct.length+1;j++) {
		   
			var choice=document.getElementById('c' + (j));
			var holder=choice.parentNode;
			holder.removeChild(choice)
			var words=holder.firstChild.firstChild.nodeValue;
			var item=document.createTextNode(words)
			var label=holder.firstChild
			holder.removeChild(label)
			holder.appendChild(item)
	
		if (which=="right" && correct[j-1]==1){
		// answer is correct		
			holder.style.color="green"
                        holder.style.fontWeight="bold"
	           holder.style.backgroundImage="url(../common_files/images/tick.gif)"
			holder.style.backgroundRepeat="no-repeat"
			holder.style.backgroundPosition="99% 2px"
				
		}
In Firefox this works correctly. In IE5.5 and 6, the color and font-weight work correctly but the background image doesn't show on the first choice (assuming the first choice is correct).

It's only the first choice that loses the tick, but I've noticed it where all four are correct it puts the tick on choice 3, then 4, then 2, but not on 1. Firefox seems to put all four ticks up instantaneously. My first attempt didn't add the styles one by one but allocated a className but the same thing happened, IE doesn't like the first background image.

I'm sorry I can't give a URL as it's intranet stuff, but I'll answer any questions about what the rest of the code is.