Gradient style in a div background, is not working in IE

Question

I'm trying to make a nice frame for a logo that will be inserted in a webpage I'm working on. And for some reason IE won't display that div, with the fading color. All I want is a simple gradient in an empty div with predefined dimensions. Google chrome is displaying it just like I want, but IE is not displaying anything. And since I have copied the gradient part from here without understanding a word, I cannot debug it.

Here is the code (in a very reduced version):

<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-8-i">
<style>
#headGreen{
    float: left;
    margin: 52px 0px 0px 0px;
    width : 300px;
    height: 30px;
    background-image: linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -o-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -moz-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -webkit-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);
    background-image: -ms-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%);

    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        color-stop(0.04, rgb(255,255,255)),
        color-stop(0.82, rgb(68,179,68))
    );
}
#header{
    width: 800px;
    height: 100px;
}
</style>
</head>
<body>
<div id="header">
<div id="headGreen"></div>
</div>
</body>
</html>

I'm using IE9, but I would like it to work in others also. Thanks :)

Duplicate of http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9 ? In other words, you can't. Need to use the MSIE filters. — anothershrubery, Mar 13 '12 at 14:36

score 2 · Answer 1 · answered Mar 13 '12 at 15:46

2

Gradients In Internet Explorer going all the way back to Version 6 got you down?

No worries! Check out CSS3Pie.

http://css3pie.com/

Thanks, hope this helps! Aaron

answered Mar 13 '12 at 15:46

Aaron Brewer

3,567
18
48
78

This site is grate! I already took another answer that works, but it has some other things I need... Thanks! :) – Ramzi Khahil Mar 13 '12 at 16:22
I am glad I could help. Enjoy CSS3Pie Martin! :-D. I use it all of the time. – Aaron Brewer Mar 13 '12 at 16:25

score 0 · Answer 2 · answered Mar 13 '12 at 14:38

0

I recommend using the Ultimate CSS Gradient Generator for generating gradients.

It utilizes IE's native filters and ensures compatibility all the way back to IE6. I use this all the time.

answered Mar 13 '12 at 14:38

user110857

2,023
1
21
33

score 0 · Accepted Answer · edited May 23 '17 at 12:28

-ms-linear gradient is only available in IE 10.

Use the following:

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

filter is supported in IE7-
-ms-filter is recommended in IE8 - 9. Important note: the property value has to be quoted.

See CSS3 cross browser linear gradient for a detailled explanation on the gradient filter syntax.

score 0 · Answer 4 · answered Mar 13 '12 at 14:39

I don't think that IE9 is already supporting this all I found is this:

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Referring to CSS3 Please IE10 will support it.

http://css3please.com/

I think the older versions will work as they are :

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

  background-color: transparent;
  background-color: rgba(180, 180, 144, 0.6); 
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
            zoom: 1;

score 0 · Answer 5 · answered Mar 13 '12 at 14:40

0

The following filter wlil only be read by IE:

 #headGreen{
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#44B244');
 }

answered Mar 13 '12 at 14:40

spacebiker

3,777
4
30
49

Gradient style in a div background, is not working in IE

5 Answers5