#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    113
    Rep Power
    16

    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:
    .ui-widget-content{background-position:0 0;
    border-radius:5px;
    box-shadow: 5px 5px 5px 2px #333;
    }
    Code for the title header of the boxes:
    Code:
    /*CSS for the draggable boxes grey header bar*/			
    .draggable-header {width:195px; 
    	               height:30px; 
    	               background: rgba(205, 201, 201, 0.5);
    		  float:left;				   
    				   }
    /*CSS for the draggable boxes header link*/				   
    .draggable-header a{
    		color:#FFF;
    		margin:4px 0px 0 10px;
    		display: inline-block;
    		text-decoration:none;
    		font-size: 1.3em;	
    		text-shadow: 2px 2px #333;
    		filter: progid:DXImageTransform.Microsoft.Shadow(Color=black, direction=Bottom right, strength=2);													
    				   }
    Is there a fix for this? or a workaround?

    Thanks
    DSFX.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    I recommend you consider using CSS3 PIE instead of the filter property.

    The other solution is to use the chroma filter in addition to the other(s) you're using.
    How to Simulate CSS3 box-shadow in IE6-8 Without JavaScript
    CSS3 Text-Shadow Can It Be Done in IE Without JavaScript?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68

    Graceful Degradation


    I would argue to let it just gracefully degrade and remove the ms filter. The type will be perfectly readable without text shadows.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    113
    Rep Power
    16
    Originally Posted by Paul-Ninja
    I would argue to let it just gracefully degrade and remove the ms filter. The type will be perfectly readable without text shadows.
    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.

    Thanks,
    DSFX

IMN logo majestic logo threadwatch logo seochat tools logo