background gradient not rendering correcty in IE10

Question

#top_container
{  
   padding-bottom: 5px;
   background: #d1d1ff;
   background: -webkit-gradient(linear, left top, left bottom, from(#7db9e8), to(#1e5799));
   background: -moz-linear-gradient(#d1ffff, #d1d1ff);
   background: -o-linear-gradient(#d1ffff, #d1d1ff);
   background: -webkit-linear-gradient(#d1ffff, #d1d1ff);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffff', endColorstr='#d1d1ff',gradientType=0 );
   background: -ms-linear-gradient(top, #d1ffff 30%, #d1d1ff 100%);
   background:linear-gradient(to bottom, #d1ffff 30%, #d1d1ff 70%);
}

The gradient is being displayed correctly except in IE10 - I have searched for other possible versiuon of syntax to use and tried many different version of both the -ms-linear-gradient and linear-gradient.

What else could be cauisng this not to be displayed. The background #d1d1ff is being displyed in the container.

Answer 1

jsFiddle built using Ultimate CSS Gradient Generator. Lot's of tools online for this! Added a min-height so that it will display properly on jsFiddle make sure you remove that if you copy this code.

CSS:

#top_container {  
    min-height: 200px;
    padding-bottom: 5px;
    background: #d1ffff;
    background: -moz-linear-gradient(top,  #d1ffff 0%, #d1d1ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1ffff), color-stop(100%,#d1d1ff));
    background: -webkit-linear-gradient(top,  #d1ffff 0%,#d1d1ff 100%);
    background: -o-linear-gradient(top,  #d1ffff 0%,#d1d1ff 100%);
    background: -ms-linear-gradient(top,  #d1ffff 0%,#d1d1ff 100%);
    background: linear-gradient(to bottom,  #d1ffff 0%,#d1d1ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffff', endColorstr='#d1d1ff',GradientType=0 );
}