html - Thin Spacer CSS not working properly in IE 8 and IE 7 -

i have been trying apply css thin spacer have .

normally mozilla, gradient have added :

background: linear-gradient(to bottom, #ffffff 18%,#ecedeb 18%,#d1d5d0 100%); 

this looks in mozilla :

for ie , added following bit of code :

  filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffff', endcolorstr='#d1d5d0',gradienttype=0 ); 

and in ie looks :

as can see above , spacer in ie not thick continuous red line, however, in mozilla so. can suggest how must make spacer in ie thick , continuous in mozilla ?

edit : folks facing problem, have used csspie3(pie.js version 1.0) per spudley's suggestion overcome problem .

there aren't good solutions gradients in old-ie -- it's old browsers don't well.

ie's old filter styles known having major bugs , quirks. you're finding, they're not fun work with.

you have couple of other options though:

1. you drop gradients old ie versions. it's visual nicety, , won't affect actual functionality of site. okay, old ie users may not site looking quite nice people newer browsers.... well, yeah, know what? they're on old ie versions, used now; can live it.

   creating plain fall-back easy. specify normal plain colour background style in css above gradient background. there's conflict, browsers take last 1 understand, modern browsers take gradient , old ie (and other old browsers if anyone's using them) take plain colour background.

2. if need gradients, try using css3pie library. little javascript lib tries add few standard css features old ie versions, including css gradients. works internally using vml graphics, not filter styles, means don't bugs filter causes, might work better in case have.

hope helps.