0

In my banner I've got a gradient. Below is the support for Chrome, Firefox & IE. However, IE 9 does not support gradients in the ms-linear-gradient fashion. Is it possible to make the banner a solid color for visitors on IE 9? Currently the background is white when I visit it on IE 9.

 background: -moz-linear-gradient(#7AAC41, #16590f);
 background: -webkit-linear-gradient(#7AAC41, #16590f);
 background: -ms-linear-gradient(#7AAC41, #16590f);
Kypros
  • 2,997
  • 5
  • 21
  • 27
VegaStudios
  • 378
  • 1
  • 4
  • 22

2 Answers2

1

You can just simply add a "default" background before you gradient tags, like so:

background: #7AAC41
background: -moz-linear-gradient(#7AAC41, #16590f);
background: -webkit-linear-gradient(#7AAC41, #16590f);
background: -ms-linear-gradient(#7AAC41, #16590f);

When the page is rendered in IE, the browser won't be able to understand the -moz-linear-gradient, -webkit-linear-gradient, and -ms-linear-gradient properties but will understand the background property. Likewise, in other browsers, the last property the browser understands will be the color.

This is known as writing a browser fallback.

James Taylor
  • 6,158
  • 8
  • 48
  • 74
  • @VegaStudios: In addition to this answer, you should also remove the `-ms-` prefix as it is no longer in use by any version of IE. Note that it may generate a different gradient however as the unprefixed syntax is somewhat different from the prefixed syntax. See http://stackoverflow.com/questions/19486680/are-top-and-to-top-the-same-direction-for-linear-gradients – BoltClock Apr 10 '15 at 19:24
0

I would suggest using a CSS conditional comment:

<!--[if lt IE 9]>

<![endif]-->

You could add a CSS file specifically for IE9, and as long as it is below the CSS file specifying the background color of the banner, it will take precedence.

Charlie
  • 1,117
  • 9
  • 12
  • I think this will method will work, but might add some bloat in terms of page size. I try to avoid conditional selectors because they are hard to manage and keep organized. Good answer, though. – James Taylor Apr 10 '15 at 16:46
  • Thanks, Charlie, but James is right wrt bloating page size. I went ahead and added a `background`....a duh! – VegaStudios Apr 10 '15 at 16:56