Gradient Trouble IE 9

**itivae** · 04-23-2013, 03:29 PM

Hello. I am using the CSS gradient effect on the top menu of my pages. I understand this isnt supported for IE 9. The thing that is confusing is that I have a hover effect using the gradient and that does work in IE 9....am I missing something? Why does the gradient work for hover but not for background? Site is here

Thanks in advance.

**Beverleyh** · 04-23-2013, 05:04 PM

In "/wp-content/themes/responsive/style.css", hexidecimal shades of grey are used on the menu's "normal" state, so you can actual see the gradient in IE9 - it's just grey instead of purple;

Code:

.menu { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d); }

The menu gradients are defined for all browsers in this "/wp-content/themes/responsive/style.css" stylesheet, however, there is a later stylesheet that is overriding all but the gradient for the Microsoft browser.

That stylesheet is "/wp-content/themes/responsive_child/style.css", (which uses @import to pull in the stylesheet referenced above) and overrides the grey to shades of purple. It looks like you've tried to add extra lines for all the other browsers, but you've just missed the Microsoft filter to account for IE.

So try changing "/wp-content/themes/responsive/style.css" to use shades of purple instead of grey against the .menu selector (its listed under a the "=Header Menu (Primary) heading"), OR in, "/wp-content/themes/responsive_child/style.css", make the change in red;

Code:

.menu {

font-family: arial;

background-image:none !important;

-moz-box-shadow: 0px 4px 4px #000;

-webkit-box-shadow: 0px 4px 4px #000;

box-shadow: 0px 4px 4px #000;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

 

  /* Safari 4-5, Chrome 1-9 */

  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#663399), to(#110a15)) !important;

  

  /* Safari 5.1, Chrome 10+ */

  background: -webkit-linear-gradient(top, #663399, #110a15) !important;

  

  /* Firefox 3.6+ */

  background: -moz-linear-gradient(top, #663399, #110a15) !important;

  

  /* IE 10 */

  background: -ms-linear-gradient(top, #663399, #110a15) !important;

  

  /* Opera 11.10+ */

  background: -o-linear-gradient(top, #663399, #110a15) !important;


/* IE 9 */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#663399, endColorstr=#110a15); 

}