Question

i am trying to style a div with box-shadow and gradient cross-browsed. I am using sass & compass.So,i try to implement mixins that will help me generate that effect and reuse it everywhere i want. Unfortunately ,only gradient is shown.
my div is:

<div class="container" id="logo-bar">
  ......
</div>

my scss code is :

    @mixin ie-linear-gradient($start-color, $end-color) {
      filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#    {$start-color}', endColorstr='#{$end-color}');
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}')"; 
}
    @mixin ie-box-shadow ($color, $direction, $strength) {
      filter: progid:DXImageTransform.Microsoft.shadow(color='#{$color}', Direction=#{$direction}, Strength=#{$strength});
      -ms-filter: "progid:DXImageTransform.Microsoft.shadow(color='#{$color}', Direction=#{$direction}, Strength=#{$strength})";
}

#logo-bar {
  padding:5px 0;
  border-bottom: 1px solid #c0c0c0;
  @include single-box-shadow(#e0e0e0,0px,1px,2px,false,false);
  @include ie-box-shadow(#e0e0e0,90,2);
  background: #fefefe;
  @include background-image(linear-gradient(top, #fefefe, #E6E6E6));
  @include ie-linear-gradient(#fefefe, #E6E6E6);
  min-height:1px; /* for IE 7 to show gradient */
}

Answer 1

Unfortunately, you cannot do this with any version of CSS (or a css compiler) in the manner you want.
From http://www.css3please.com

Multiple IE filters must be comma delimited in a single declaration.
They are not additive in separate blocks.

So you’d have to have

filter: {{your boxshadow filter}}, {{your gradient filter}};

not

filter: {{your boxshadow filter}};
filter: {{your gradient filter}};

which is what your CSS will get translated to on the browser end.

As with all CSS definitions in a single ruleset, the last one defined wins.

I would suggest creating more mixins that combine the effects in the desired manner. For example, have a mixin for boxshadow, one for gradient, and one for boxshadow with gradient. Not the most elegant solution, but it doesn’t seem possible with IE any other was with CSS.