IE issue - Drop shadows cuts image by conteiner borders

Question

I'm having a problem with IE8. I got a ribbon IMG over another. When I drop shadow the conteiner DIV of both IMGs, absolute positioned ribbon gets cut by conteiner borders.

Here's the HTML:

<div class="news shadow">
    <img class="image" src="">
    <img src="ribbon.png" class="ribbon">
</div>

Here's the style definition:

div.news{
    position:relative;
    background:white;
    width:50%;
    margin-left:25%;
    margin-bottom:3em;
    margin-top:1em;
    z-index: 10;
    clear: both;
}
.shadow{
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000')";
}

Here's the result in IE8:

Here's the expected result:

EDIT: added jsfiddle in https://jsfiddle.net/xk3wz4fd/1/

Thanks for your help.

Cheers!

Answer 1

I don't know what your ribbon or image classes look like in the css, but you can add the shadow class to the main image rather than the news container.

<div class="news">
    <img class="image shadow" src="block.png">
    <img src="ribbon.png" class="ribbon">
</div>

This is how my example looks in ie8 on win7: http://screencast.com/t/vIW5Egl4m

EDIT: Now that I see your JSFiddle, I have a better idea of what you want. This should do the trick:

https://jsfiddle.net/93mdg2y1/2/

As you can see, you will need to nest another container within your news container to get the desired effect as the ie8 filter hides any overflow of it's container.

<div class="news">
    <img src="http://dummyimage.com/379x376/5e7eff/fff&text=ribbon" class="ribbon">
    <div class="container shadow">
        <img class="image" src="http://dummyimage.com/379x376/e64100/fff&text=image">
        asdas
    </div>
</div>

And add the css to the new container class(you should pick a better name)

div.container{
    position:relative;
    background:white;
    clear:both;
}

Btw, you should use filter and -ms-filter together if you want to use that drop shadow in older versions of ie.