-3

I can't get a gradient working in IE 8+.

.answerbox {
    height: 125px; /*Specify Height*/
    width:  251px; /*Specify Width*/
    border: 1px solid #D9D9D9;
    border-radius: 3px 3px 3px 3px;
    position: relative;
    margin-bottom: 15px;
    background: -moz-linear-gradient(#FFFFFF, #E6E6E9) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(#FFFFFF, #E6E6E9) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E6E6E9)) repeat scroll 0 0 transparent; /* older webkit syntax */
    background: -webkit-linear-gradient(#FFFFFF, #E6E6E9) repeat scroll 0 0 transparent;
    word-wrap: break-word;
    padding: 7px;
}

.shadow {
  -moz-box-shadow:    0 0 4px #9A9EAD;
  -webkit-box-shadow: 0 0 4px #9A9EAD;
  box-shadow:         0 0 4px #9A9EAD;
}

Expected Output:

enter image description here

Current Output:

enter image description here

4
  • What exactly is not working? I assume it's "linear-gradient" you're referring to. If so - it's only supported in IE10, for earlier versions you need to use "filter()" stackoverflow.com/a/3069832/2454376
    – mishik
    Jun 14, 2013 at 10:58
  • 3
    Re-word your question. Which version of IE? What's not working, don't just say it's not working, as we have no idea what it is that you're trying to accomplish.
    – Nick R
    Jun 14, 2013 at 10:58
  • Which versions of IE is it failing in? In what way is it 'not working'?
    – user1864610
    Jun 14, 2013 at 10:59
  • @@Nick R: Question is updated. Hope now it's clear... thanks for pointing out the exact mistake.
    – Fero
    Jun 14, 2013 at 11:06

2 Answers 2

1

Actually you are using css3 which is not fully supportable in ie and for make sure you can check it here what css you have using and it is supportable or not.

as am assuming you are using gradients which is not working in ie9 and below versions so you have to use filter for this check this code

background: #999; /* for non-css3 browsers */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

and for better understand go through this link

and for box shadow use this instead of your code and arrange it according to you

a better explanation you could find here

.shadow1 {
    margin: 40px;
    background-color: rgb(68,68,68); /* Needed for IEs */

    -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}
0

The problem you have is that Internet Explorer isn't a Mozilla (moz) browser; nor is it an Opera (o) browser; nor is it a WebKit (webkit) browser. Looking at your background styles:

background: -moz-...;
background: -o-...;
background: -webkit-...;

For IE10 you'd may need to use the ms prefix, and for older versions you'll need to use a filter.

background: -ms-...;
filter: ...;

But of course you're still missing one thing: the native CSS implementation of linear-gradient:

background: linear-gradient(...);

I'd suggest using http://www.colorzilla.com/gradient-editor/ to generate background gradients in CSS.

2
  • IE10 is the first version to support gradients, and it does not use prefixes: caniuse.com/#feat=css-gradients
    – cimmanon
    Jun 14, 2013 at 12:13
  • @cimmanon yeah I wasn't really sure what version (if any) used the -ms select for this. Jun 14, 2013 at 12:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.