How can I not show a css drop shadow on ie6?

StackOverflow https://stackoverflow.com/questions/6032108

  •  14-11-2019
  •  | 
  •  

Question

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

Was it helpful?

Solution

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.

OTHER TIPS

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)

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.

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.

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top