I tried to make box-shadow affect work cross browsers, in order to make ie work I used "filter" property but the effect cascades to the child element (in my case a span) I tried to stop it by using filter : none but it didn't work searched the web but I couldn't find a solution. please help me solve this problem.

HTML code :

<div id="shadow">
            <span>text text</span>             
</div>

CSS code :

#shadow{
 -moz-box-shadow: 3px 3px 4px #000;
 -webkit-box-shadow: 3px 3px 4px #000;
 box-shadow: 3px 3px 4px #000;
 /* For IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}