-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

madth3
  • 7,275
  • 12
  • 50
  • 74
Fero
  • 12,969
  • 46
  • 116
  • 157
  • 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()" http://stackoverflow.com/a/3069832/2454376 – mishik Jun 14 '13 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 '13 at 10:58
  • Which versions of IE is it failing in? In what way is it 'not working'? –  Jun 14 '13 at 10:59
  • @@Nick R: Question is updated. Hope now it's clear... thanks for pointing out the exact mistake. – Fero Jun 14 '13 at 11:06

2 Answers2

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;
}
The Mechanic
  • 2,301
  • 1
  • 26
  • 37
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.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218