September 4th, 2013, 08:12 PM
Border-radius breaks shadow filter
So i'm writing a new staff intranet and am running into issues early on with MS filters not working well with CSS3.
here's what is happening in IE9:
here is how it should look in chrome:
The CSS for the boxes looks like this. When i turn the boarder radius off the problem goes away:
Code for the title header of the boxes:
box-shadow: 5px 5px 5px 2px #333;
Is there a fix for this? or a workaround?
/*CSS for the draggable boxes grey header bar*/
background: rgba(205, 201, 201, 0.5);
/*CSS for the draggable boxes header link*/
margin:4px 0px 0 10px;
text-shadow: 2px 2px #333;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=black, direction=Bottom right, strength=2);
September 4th, 2013, 09:48 PM
September 5th, 2013, 10:41 AM
I would argue to let it just gracefully degrade and remove the ms filter. The type will be perfectly readable without text shadows.
September 6th, 2013, 10:07 AM
Thanks for the advice guys. In the hopes my office will soon be on IE10 i'm going to let it degrade gracefully rather than jump through hoops for IE.
Originally Posted by Paul-Ninja