Contents vanish when changing opacity of table (IE)

[chris]

I've used JavaScript DOM scripting to create a table element and alter
its opacity. Bizarrely, the contents of the table appear to vanish when
the opacity changes.

One important note is that I am using transparent PNGs as background
images of elements within the table. The following CSS is used to style
two elements within the table:

..arrowLeft {
filter:progid:D XImageTransform .Microsoft.Alph aImageLoader(sr c='/core/images/arrow.png',
sizingMethod='c rop') }
..arrowRight {
filter:progid:D XImageTransform .Microsoft.Alph aImageLoader(sr c='/core/images/arrowRight.png' ,
sizingMethod='c rop') }

Is the vanishing problem a bug in Internet Explorer? And if so, I'd be
grateful if you could help me find a workaround.

In the example on the URL below, the beige arrows on the photo are the
tables in question, and you will observe their contents vanishing when
you mouse in and out of the photo (which should fade them in and out).

http://testing.chrisbeach.co.uk/core...er.php?ID=6572

Below are snippets of code used to create the tables and their contents
(which form the arrows), and also the code used to alter the opacity:

// Creating the table (arrow) and contents
function Arrow( user, coords )
{
this.user = user;
this.coords = coords;
var objArrowContain er = document.create Element( 'table' );
var objTableBody = document.create Element( 'tbody' );
var objArrowRow = document.create Element( 'tr' );
var objArrowLeft = document.create Element( 'td' );
var objArrowRight = document.create Element( 'td' );
if ( this.user.image URL )
{
var objIcon = new Image();
objIcon.src = ( this.user.image URL.substring( 0, 7 ) == 'http://' ) ?

this.user.image URL : domain + this.user.image URL;
objArrowLeft.ap pendChild( objIcon );
}
objArrowLeft.cl assName = 'arrowLeft';
objArrowRight.c lassName = 'arrowRight';
objArrowContain er.className = 'arrowContainer ';
objArrowLeft.ap pendChild( document.create TextNode( this.user.foren ame
) );
objArrowRight.a ppendChild( document.create TextNode( " " ) );
objArrowRow.app endChild( objArrowLeft );
objArrowRow.app endChild( objArrowRight );
objTableBody.ap pendChild( objArrowRow );
objArrowContain er.appendChild( objTableBody );
objArrowContain er.id = this.user.usern ame;
objArrowContain er.onmousedown = function( e )
{
objDragged = objArrowContain er;
docMouseMove( e );
return false;
};
objArrowContain er.style.left = ( coords.x + ARROW_OFFSET.x ) + "px";
objArrowContain er.style.top = ( coords.y + ARROW_OFFSET.y ) + "px";
this.objElement = objArrowContain er;
}
// Altering the opacity

if ( arrowArray[i].objElement.sty le.MozOpacity != null)
{ arrowArray[i].objElement.sty le.MozOpacity = arrowAlpha; }
if ( arrowArray[i].objElement.sty le.opacity != null)
{ arrowArray[i].objElement.sty le.opacity = arrowAlpha; }
if ( arrowArray[i].objElement.sty le.filter != null)
{
var ieOpacity = Math.round( arrowAlpha * 100 );
arrowArray[i].objElement.sty le.filter =
"progid:DXImage Transform.Micro soft.Alpha(opac ity=" + ieOpacity + ")";
}

[chris]

I've just tried adapting the code to add the AlphaImageLoade r every
time the opacity changes -- this hasn't worked. The content of the
table still disappears

any suggestions?