0

Is there a way to make the following work on ie8 and ie9?

Thanks

background: -moz-moz-radial-gradient(center top, farthest-side, rgba(175,175,175,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center top, farthest-side, 0px, center top, farthest-side, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center top, farthest-side, rgba(175,175,175,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center top, farthest-side, rgba(175,175,175,0.3) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-ms-radial-gradient(center top, farthest-side, rgba(175,175,175,0.3) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(farthest-side at center top, rgba(175,175,175,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C */
Henrik Andersson
  • 45,354
  • 16
  • 98
  • 92
a_knife_a_fork
  • 47
  • 3
  • 8

1 Answers1

2

I note that you've got a problem in the CSS in the question where you've doubled up the -moz- and -ms- prefixes. Those definitely won't work like that.

Ignoring that, you're right that radial gradients are a problem in old IE. In fact, CSS gradients in general are problematic in old IE versions because CSS gradients are not supported in IE 9 or earlier.

My normal solution to CSS gradients in IE 6-9 is CSS3Pie.

However for radial gradients this isn't sufficient, because CSS3Pie doesn't currently support radial gradients. See the css3pie documentation for more info on this. To quote:

Radial gradients are not supported at this time; this feature is planned for a future release (see issue #2) but it may turn out to be impossible to implement in IE 6-8 due to VML's strange radial gradient behavior.

The other option you have is to use IE's filter style, (and accept all the weird issues and quirks that come with it). Even here, radial gradients are difficult, but there is a solution here that might help: Create a radial gradient for Internet Explorer 6/7/8

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thanks for the info Spudley, just a thought would it not be easier to have some kind of media query detect the users browser and place in a png if their using ie? – a_knife_a_fork Apr 19 '13 at 11:48
  • @a_knife_a_fork - yep, an old-school png would probably do the trick (you could even consider using a base64 encoded image embedded in the CSS if wanted to keep it as a CSS solution). The downside to that of course is that it's not scalable, and particularly for a radial gradient it would be a relatively big extra file to download (linear gradients done that way can be a single pixel high, which is smaller and partially scalable, but for a radial gradient you'd need to have the png as the whole image) – Spudley Apr 19 '13 at 12:38