CODEWITHSUNDEEP
internet-explorercssinternet-explorer-9internet-explorer-10linear-gradients
starbucks
starbucks

Reputation: 3016

How do I fix this gradient for IE 9 and 10?

CODE: 

body {
    background-color: #CACACA;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACACA), to(#F6FAFB));
    background-image: -webkit-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:    -moz-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:     -ms-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:      -o-linear-gradient(top, #CACACA, #F6FAFB);
}

Using this on all browsers and platforms it's great but for IE 10 the gradient block keeps repeating like this:

enter image description here

What can I do fix this for IE 10?

For IE 9 the gradient doesn't even work it just shows the #CACACA. How do I fix this for IE 9 as well?

Upvotes: 0

Views: 1300

Answers (3)

Spudley
Spudley

Reputation: 168655

First, for IE10:

Drop the -ms-linear-gradient and just use linear-gradient without the prefix; IE10 doesn't need a prefix and IE9 doesn't support the standard at all either with or without a prefix. So the -ms- prefix is entirely unnecessary.

Secondly, for IE9:

IE9 doesn't support the standard gradient syntax. You could use the old-school filter style as supported by IE8; that does work in IE9, but that sucks -- it's horrible syntax, it feels like going back to the dark ages, and it has some nasty gotchas (incompatible with border-radius... heh).

Instead, I'd suggest using that good old polyfill script CSS3Pie to support standard gradient syntax in IE9. Makes things much easier to work with.

Upvotes: 1

Jacky lou
Jacky lou

Reputation: 13

take a look into this two http://webdesignerwall.com/tutorials/cross-browser-css-gradient/comment-page-1 and http://css3pie.com/ this might help you figuring your things up to cater your desires.

Upvotes: 1

phts
phts

Reputation: 3915

For IE10: background-image: -ms-linear-gradient(top, color[, color]*);

For IE9: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='color1', endColorstr='color2', GradientType=0);

No repeat: background-repeat: no-repeat

Upvotes: 1

Related Questions