2

I want to know if I can ignore my css drop shadow on ie6 without using conditional statements to filter the css.

here is my current css:

/* Drop shadow */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);

Maybe -ms-filter-ie6: none or something :P along those lines

Dennis Martinez
  • 6,344
  • 11
  • 50
  • 67
  • dont want to sound to pedantic but how would you do this without condtion - surly there is always a condition? – Rob May 17 '11 at 14:16
  • Why would there always be a condition? – Dennis Martinez May 17 '11 at 14:17
  • 1
    because the condtion is - is the user browser IE6? - if no condition exists then how would the website css know to do somthing diffrent? – Rob May 17 '11 at 14:18
  • @Rob In an ideal internet it would respect the standard and just work. But yeah, there always has to be a condition... – easwee May 17 '11 at 14:28
  • @easwee - thanks, like I said I didnt want to sound off – Rob May 17 '11 at 14:29

5 Answers5

3

Adding the following line below your -ms-filter: line should work:

* html -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(enabled=false)";

The * html is read only by IE6. But that is a CSS hack, which is very bad practice. You should use conditionals instead.

Devin Burke
  • 13,642
  • 12
  • 55
  • 82
2

Use an IE-Only CSS Conditional Comment that disables the proprietary filter for IE6/Win:

<!--[if IE 6]>
    <style type="text/css">
        .drop-shadow {
            filter: progid:DXImageTransform.Microsoft.Shadow(enabled='0');
        }
    </style>
<![endif]-->

The 'enabled' filter attribute is a boolean that expects a true or false value to enable or disable the filter:

0 = false (Filter is disabled)
1 = true (Default value. Filter is enabled)

rjb
  • 9,036
  • 2
  • 44
  • 49
1

IE6 only knows about filter, it won't recognise the -ms-filter style, so dropping filter would do the trick. The downside is that this would also kill it for IE7.

Spudley
  • 166,037
  • 39
  • 233
  • 307
1

You can use te /**/ hack.

filter/**/: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

It should be ignored by ie6, but I don't have ie6 to test it.

As Justin Satyr said it's a hack and you should use conditional comments.

Litek
  • 4,888
  • 1
  • 24
  • 28
1

I've been putting the conditionals on the <html> tag:

<!DOCTYPE HTML>
<!--[if lt IE 7 ]>  <html class="ie ie6"><![endif]-->
<!--[if gte IE 7 ]> <html class="ie"><![endif]-->
<!--[if ! IE ]><!--><html class="notie"><!--<![endif]-->
<head>
    ...

And then in the style sheet one can do (you only need one style sheet now, and no inline styles in the html)

.ie6 .drop-shadow
{
    filter:none; /* or whatever */
}

If you need different code for other IEs you can add more conditionals. I've had one project where IE6, IE7, IE8 and IE9 all behaved differently for at least one item (but FF, Chrome and Safari were close), so there was five different <html> tags.

If you use DreamWeaver I've heard you'll need the same comments around the </html> as well.

If you need different code for other browsers, you would have to use jQuery or similar to add classes: like $('html').addClass('ff4'); though things might be unexpected if js is not enabled.

hood
  • 141
  • 5