IE9 not displaying filter: progid:DXImageTransform.Microsoft.Matrix properly

[earrame]

I am attempting to place a couple pictures on a wordpress site that are rotated 15 degrees. Everything is working pretty good using:

#attachment_29{

  -webkit-transform: rotate(-15deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(-15deg);  /* FF3.5+ */
      -ms-transform: rotate(-15deg);  /* IE9 */
       -o-transform: rotate(-15deg);  /* Opera 10.5 */
          transform: rotate(-15deg);
              filter: progid:DXImageTransform.Microsoft.Matrix(/*IE6–IE9*/ 
                     M11=0.9659258262890683, M12=0.25881904510252074, M21=-0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');
               zoom: 1;

}

Except IE9. In IE9 the images are rotated, but there is a black box around the whole thing. If I remove the filter it works in IE9 but not earlier versions. The url is http://chucksoutdooradventures.com

Any suggestions would be greatly appreciated.

[chris.upjohn]

Try moving the filter property before your transform properties as the browser should automatically fall back to the working property if it can't read the CSS3 property.

[Paul O'B]

The IE filters completely change the behaviour of an element so you should avoid giving them to IE9 when not needed. They cause all sorts of problems such as you experienced and will kill the corrners when using border-radius and the matrix filter.

Just separate them into conditional comments as follows:

<!--[if lt IE 9]>
<style type="text/css">
#attachment_29{
 filter: progid:DXImageTransform.Microsoft.Matrix(/*IE6–IE9*/ 
                     M11=0.9659258262890683, M12=0.25881904510252074, M21=-0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');	
}																						
</style>
<![endif]-->

That avoids the problem altogether and keeps the code clean.

[earrame]

Thanks, I put a conditional comment in the functions.php file and added an ie only style sheet. that did the trick.