style.background image problem in IE

I've got a page that has several divs in it where the backgroudn image
changes based on a selection from a select. It works fine in Firefox
but not in IE. The javascript is:

function showImage(divID, selectedImg){
var theDiv = document.getElementById(divID);
var selIndex = selectedImg.selectedIndex;
if (selIndex > 0) {
var imgName = selectedImg.options[selIndex].value;
var newImage = "url(../images/itemImageChoices/" + imgName
+ ")";
theDiv.style.backgroundImage = newImage;
alert(theDiv.style.backgroundImage);
theDiv.style.border = "black solid 1px";
} else {
theDiv.style.backgroundImage = "";
theDiv.style.border = "none";
}
}

The div is merely:
<div id="largeImage">
</div>

and the CSS for it is:
div#largeImage{
position: absolute;
top: 340px;
left: 100px;
width: 150px;
height: 200px;
background-repeat: no-repeat;
border: black solid 1px;
}

Oddly though, if I put an onmouseover event right in the div it works
in IE but sporadically. I've added an alert in the javascript right
after the assignment of the new background image and it reports the
correct value but the image is not shown in the div.

IE version 6.0, Firefox 1.0.7.

Any input would be greatly appreciated.

thanks

Dave

I would guess it's nothing wrong with your code (it works in Firefox),
but the blame lies with the usual half-baked job of Microsoft's
implementation of IE.

For example, this simple snippet:

div.header-line {
position: absolute;
top: 0px;
left: 0px;
width: 170px;
height: 4px;
z-index: 0;
background-color: #d0fdf7;
}

would render a line 170 pixels long, 4 pixels high, with color d0fdf7,
right?

Yep, in Firefox, Opera, Mozilla etc it does, but in IE (6.0) the height
is a constant 14 pixels high. Only when the height is set to more than
14 it starts to render the height correctly!

That this POS of a browser is still being used is beyond me.

Baalbek