I have some nested divs and I want to apply a transition filter to "articleholder".

<div id="bmholder">
<div id="articleholder">
<div id="days" class="glow"></div>
<div id="days2" class="normal"></div>
</div>
</div>

During the transition, the background of the "days" div tag, that has the glow filter applied originally becomes black, which is undesired and not observed in the previous versions of IE. The contents of the second ("days2") div is outlined as the transitions proceeds.
Can anyone suggest a way to avoid this "new behavior" while preserving the div tags structure and css?

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visual Filter Transitions</title>
<script type="text/javascript">
function startTransition(){

document.getElementById("articleholder").style.filter="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)";

document.getElementById("articleholder").filters(0).Apply();
document.getElementById("articleholder").filters(0).Play();
document.getElementById("days").innerHTML = Math.floor(Math.random()*10);
document.getElementById("days2").innerHTML = Math.floor(Math.random()*10);
}
</script>
<style type="text/css">
#bmholder {
	position:absolute;
	left:0px;
	top:0px;
	width:700px;
	height:500px;
	z-index:1;
	visibility: visible;
	background-color: #FFC;
}
#articleholder {
	position:absolute;
	z-index:10;
	left: 10px;
	top: 42px;
	width: 500px;
	height: 350px;
	border: thick double #D8CB9E;
}
#days {
	position:absolute;
	width:200px;
	height:320px;
	z-index:3;
	left: 10px;
	top: 2px;
}
#days2 {
	position:absolute;
	width:200px;
	height:320px;
	z-index:3;
	left: 250px;
	top: 2px;
}
.glow {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 250px;
	color: #D8CB9E;
	font-weight: bold;
	overflow: auto;
	text-align: justify;
	filter: Glow(Color=666666, Strength=2);
	padding: 10px;
	border: 1px solid #D8CB9E;
}
.normal {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 250px;
	color: #D8CB9E;
	font-weight: bold;
	overflow: auto;
	text-align: justify;
	padding: 10px;
	border: 1px solid #D8CB9E;
}
</style>
</head>

<body>

<div id="bmholder"><input name="input" type="button" onclick="startTransition();" value="Start Transition" />
  <div id="articleholder">
    <div id="days" class="glow">0</div>
    <div id="days2" class="normal">0</div>
  </div>
</div>
</body>
</html>