Gradient doesn't apply in IE

Question

I have probably very common question, search it all over, tried pretty much everything, display:block, zoom:1,set height,width nothing worked. I have table, which is actually a POP UP, made with javascript and jquery as wall. Here is simple example of my code.

$(tr1).css('width','210px');
$(tr1).css('height','63px');
$(tr1).addClass('testClass');
$(tr1).css('border-bottom','solid 1px #c6c7c5');
$(tr1).mouseover(function(){
    $(tr1).css('cursor','pointer');
});

$(tr1).click(function(){
    open_report('EXCEL',sparam);
    popUpIsOpen = false;
    removePopupBtn();
    $(wrapperBox).remove();
});

$(tr2).css('width','210px');
$(tr2).css('height','63px');
$(tr2).addClass('testClass');

And this is my css

.testClass{
width: 210px;
height: 63px;
zoom: 1;
display: block;
background-repeat: no-repeat;

background: -webkit-gradient(linear, left top, left bottom, from(#dcdedb), to(#c9cbc8));
background: -moz-linear-gradient(top,  #dcdedb,  #c9cbc8);
background-image: -o-linear-gradient(top,  #dcdedb,  #c9cbc8);
background: -ms-linear-gradient(top, #dcdedb 0%,#c9cbc8 100%);
background: linear-gradient(top, #dcdedb 0%,#c9cbc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdedb', endColorstr='#c9cbc8',GradientType=0);
}

.testClass:hover {

background: -webkit-gradient(linear, left top, left bottom, from(#eaebea), to(#d6d7d5));
background: -moz-linear-gradient(top,  #eaebea,  #d6d7d5);
background-image: -o-linear-gradient(top,  #eaebea,  #d6d7d5);
background: -ms-linear-gradient(top, #eaebea 0%,#d6d7d5 100%);
background: linear-gradient(top, #eaebea 0%,#d6d7d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5',GradientType=0);
}

Work in all browsers except IE(ALL VERSIONS)... Any help will be appreciated! :)

Added GradientType=0 in the filters, still not working.

What version of IE are we talking about? Have you looked at http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9? — reto, Jul 26 '13 at 12:45

AnaMaria · Accepted Answer · 2013-07-26T14:10:08.540

1

Change your CSS to this and it should work

WORKING FIDDLE

.testClass {
    width: 210px;
    height: 63px;
    zoom: 1;
    display: block;
    background-repeat: no-repeat;
    background: #dcdedb;
    /* Old browsers */
    background: -moz-linear-gradient(top, #dcdedb 0%, #c9cbc8 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dcdedb), color-stop(100%, #c9cbc8));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dcdedb, #c9cbc8 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dcdedb 0%, #c9cbc8 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #dcdedb 0%, #c9cbc8 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #dcdedb 0%#c9cbc8 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdedb', endColorstr='#c9cbc8', GradientType=0);
    /* IE6-9 */
}
.testClass:hover {
    background: #eaebea;
    /* Old browsers */
    background: -moz-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebea), color-stop(100%, #d6d7d5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eaebea 0%, #d6d7d5 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5', GradientType=0);
    /* IE6-9 */
}

SCREENSHOT OF WORKING CODE IN IE7

edited Jul 26 '13 at 14:10

answered Jul 26 '13 at 13:17

AnaMaria

3,520
3
19
36

1

Well , I tested this code in IE 10 & 9. Worked perfectly for me, so i dont know you are on about. – AnaMaria Jul 26 '13 at 13:35
Actually it was the asp, file that broke the page, so your code, work the same with mine. Still nothing in IE (specified 8); – sla55er Jul 26 '13 at 13:39
I actually sat down and Tested my whole codein IE10,9,8,7. Worked exactly the same way in all 4. So its definately not a issue with the CSS. – AnaMaria Jul 26 '13 at 13:46
Why would you want to remove part of something which works. Anyway, if it does not work for you you should check other avenues man. This is all I can do. Take care now – AnaMaria Jul 26 '13 at 14:00
Il give you a last suggestion. I know my code works and is perfect. So check your IE and see if it is blocking your activeX scripts – AnaMaria Jul 26 '13 at 14:04
1

I have added a screenshot. Note that i changed the starting color to RED to show the effect clearly. Also note that the browser is running in IE7 mode – AnaMaria Jul 26 '13 at 14:11
I appreciate your help. Probably the problem with me comes from something else in the code. Thanks! – sla55er Jul 26 '13 at 14:15

Mohammad Mahdi Naderi · Answer 2 · 2013-07-26T13:27:30.607

0

You can use CSS3Pie to use CSS3 (gradients &...) in IE.

CSS3Pie Site: http://css3pie.com

and use it easily:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="your-css3pie-file.css" />
<![endif]-->

edited Jul 26 '13 at 13:27

answered Jul 26 '13 at 13:11

Mohammad Mahdi Naderi

2,975
2
14
9

Gradient doesn't apply in IE

2 Answers2