CODEWITHSUNDEEP
htmlcssinternet-explorer-8
antiother
antiother

Reputation: 13

why won't this gradient filter work in ie8?

why won't this gradient filter work in internet explorer 8?? i am led to believe that it is supported from ie6+

filter:progid:DXImageTransform.Microsoft.gradient(starColorstr='#ccc',endColorstr='#fefefe',GradientType=0);

Upvotes: 1

Views: 2014

Answers (4)

Cynthia
Cynthia

Reputation: 5403

Using the following in your CSS to set opacity should render correctly:


    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";

    /* IE 5-7 */
    filter: alpha(opacity=65);

    /* Netscape */
    -moz-opacity: 0.65;

    /* Safari 1.x */
    -khtml-opacity: 0.65;

    /* Good browsers */
    opacity: 0.65;

I tested it and it works in IE7, IE8, IE9, FF, NS, Chrome, Opera, and Safari

For the centering of the div in IE8 (I assume that's what you want the margin:auto for) add this:


    text-align:center;

For your gradient try this:


    background: #008800; /* fallback for (Opera) */

    background: -moz-linear-gradient(top, #CCC, #fefefe); /* Mozilla: */

    background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#fefefe)); /* Chrome, Safari:*/

    filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#CCC', EndColorStr='#fefefe', GradientType=0); /* MSIE */

Hope it works for you!

Best,

Cynthia

Upvotes: 0

Christoph
Christoph

Reputation: 51231

  1. Please always use <!doctype html> to bring IE into (almost)-standards-mode
  2. #ccc does not, what you expect;) Always use #RRGGBB, IE cant handle the shorhand.
  3. Several filters in one ruleblock are not allowed. Your opacity-filter overrides the gradient filter.
  4. Solution for filter: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e6cccccc",endColorstr="#e6fefefe",GradientType=0); with the first two digits being the opacity (range 255, from 00 to ff, so you need to rescale your 90% opacity accordingly -> E6)

Upvotes: 3

MayThrow
MayThrow

Reputation: 2201

Gradients and opacity are not supported by IE8.

IE has always been a nightmare for me too (and probably every developer here)

Upvotes: 1

StilgarBF
StilgarBF

Reputation: 1060

You have no doctype in your excample.

IE8 might require XHTML 1.0 Transitional as the Doctype to make margin:auto work as expected.

Upvotes: 0

Related Questions