[SOLVED] Making CSS3 gradient work in IE9

[PVM3]

Thanks Chrishirst:

This is going to be a WP site ultimately and the gradients should be seen on every page so I put the code in the head, and added "class="gradient" to the body tag in the html.

I don't have IE9: could someone check this page for me in IE9?
http://66.147.244.110/~rdbikeco/test2.html

The gradient goes from a blue through white to orange. In the not-IE browsers it's stretching vertically from top to bottom (as desired) and looks great. In IE 6,7,8 you don't see the white - it just goes from blue to orange, which is ok. I don't kow if IE9 will show 3 colors or 2 or if it's working at all (depends on if we are interpreting the instructions for the polyfill correctly.)

If it's working properly in IE9 I'm in business!

Thanks!

[chrishirst]

It's working but it's pretty awful to read if you don't have 20/20 vision.

[PVM3]

"It's working but it's pretty awful to read if you don't have 20/20 vision. "

Not to worry, content will be on top of a white page. I just stuffed text in there to have something to stretch the page to test the gradient. I had to find a way to stop the gradient from tiling and/or leaving gaps at the bottom, etc. (which I did - to get it to stretch vertically in a space that doesn't have a declared height, need to add "fixed" at the end of each rule...), so I stripped everything out of the test page but the background and some text.

Thanks for checking it out in IE9 and for you other help (thanks Meesa also).

[CapersS87]

Thanks a lot guys..
this helped me a lot.. I Googled this problem and Google sent me here to this forum..

And I registered specifically to thank you guys

[nkdcdesign]

Hi,

I experienced a similar issue with IE9 and the Ultimate CSS Gradient Generator. If you are using an external style sheet, a simple solution is to add the following line at the end of the code you copied from the generator:

filter: none; /*IE9*/

---

Here is a hypothetical example:

/* CSS Document */

div.gradientbackground
{
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #1e5799 0%, #207cca 47%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(47%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #1e5799 0%,#207cca 47%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #1e5799 0%,#207cca 47%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #1e5799 0%,#207cca 47%,#2989d8 50%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right,  #1e5799 0%,#207cca 47%,#2989d8 50%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 */
filter: none; /*IE9*/
}

/* End Page */

With this method, you don't have to create any new class selectors, which will probably save you some time.

[geno11x11]

If browsers ignore commented lines, how does this line line work? Can someone explain this?

[meesa]

Which line?

[geno11x11]

<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

[meesa]

Google IE conditional tags.

[geno11x11]

Got it. Thanks much!