Question

I have 2 divs. Parent and a child. I have box-shadow applied to the parent div. The child element is draggable. I noticed in IE, if I try to drag the child element outside the parent, it gets clipped and cut off. If you remove the shadow class then it works fine. This happens in IE6 IE7 IE8. How can i solve this issue.

Check working example at http://jsfiddle.net/g6nLU/2/

#one{
    position:relative;
    background:blue;
    width:400px;
    height:400px;
}
#two{
    position:absolute;
    background:red;
    left:20px;
    top:20px;
    width:200px;
    height:200px;
}

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

}

<div id="one" class="shadowside">
    <div id="two"></div>
</div>

Answer 1

You must remove the filter properties.

Then, you could use CSS3 PIE to handle drawing the shadow.

If you don’t want to use CSS3 PIE, you could .clone() #one (remember to change the id) and absolutely position the copy under #one, and add the filter to that.