Filter: Progid:Dximagetransform.Microsoft.Gradient Is Not Working in Ie7

filter: progid:DXImageTransform.Microsoft.gradient is not working in ie7

Having seen your fiddle in the comments the issue is quite easy to fix. You just need to add overflow:auto or set a specific height to your div. Live example: http://jsfiddle.net/tw16/xRcXL/3/

.Tab{
    overflow:auto; /* add this */
    border:solid 1px #faa62a;
    border-bottom:none;
    padding:7px 10px;
    background:-moz-linear-gradient(center top , #FAD59F, #FA9907) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, left top, left bottom, from(#fad59f), to(#fa9907));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907);    
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)";
}

filter: progid:DXImageTransform.Microsoft.gradient CSS property not working in IE

I believe that the gradient filter required full #AARRGGBB colour codes. Just #33C won't do. Try #003333CC instead. If that comes out transparent, try #7F3333CC - I can never remember which way around it goes.

PS. Try IE10. But get rid of the -ms-linear-gradient since it never existed since they went straight to linear-gradient.

what is the replacement for filter: progid:DXImageTransform.Microsoft.gradient

Try This site

http://www.colorzilla.com/gradient-editor/

Check the IE9 Support box. It will give you an SVG solution.

Linear Gradient background in IE 7 - 9

Your hex values are wrong for the IE6-9 part:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bf00', endColorstr='#009400',GradientType=0 ); /* IE6-9 */

Right to left gradient in iE with css - possible?

Sure. Just do:

/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFFFF, endColorStr=#D5D4D4, GradientType=1);

/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#D5D4D4, GradientType=1)";

---

Serious answer: the gradient filter support two gradients types: 0 (vertical) and 1 (horizontal).

If you want to switch from right->lef to left->right , you need to switch the start and end color hex.

How to make background-image with linear-gradient work on IE 11?

linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.

Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);

IE8 gradient filter not working if a background color exists

After glancing over at CSS3please I realized I was doing overkill with my IE7/IE8 gradient styles. Simply using the following style does the job:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

Apparently, there is no need for the -ms-filter and zoom rules.

Do we require filter gradient ( filter: progid:DXImageTransform.Microsoft.gradient ()for IE only as gradient effect work on firefox without it?

The filter (and -ms-filter) CSS properties are only supported in Internet Explorer. They’re a Microsoft extension to CSS, and aren’t supported in any other browser

They’re the only non-image way to achieve gradients in Internet Explorer as of version 9 (although IE 10 should support CSS gradients in some form), so they’re required in IE if you want gradients without images.

(Although as @Jules notes, IE 9 does support both SVG images and embedded base-64 encoded images, so you can have gradients in IE 9 without separate image files).

Note that Microsoft’s gradient filter is a bit more limited than the various CSS gradient syntaxes, and SVG’s gradient syntax.

CSS Gradient not working on Internet Explorer 8 & 9

I presume you generated the code from: http://www.colorzilla.com/gradient-editor/.

I believe you missed the SVG part for IE9, below is the complete CSS needed:

background: rgb(248,80,50); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4NTAzMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YxNmY1YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y2MjkwYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iI2YwMmYxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNzM4MjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(248,80,50,1)), color-stop(50%,rgba(241,111,92,1)), color-stop(51%,rgba(246,41,12,1)), color-stop(71%,rgba(240,47,23,1)), color-stop(100%,rgba(231,56,39,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=1 ); /* IE6-8 */

It states on the site about Internet Explorer Support:

Support for full multi-stop gradients with IE9 (using SVG).
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

AFAIK Internet Explorer 8 or below doesn't support multi stop gradients.

Example: http://jsbin.com/cager/2/

---

Related Topics