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);
}
Bookmarks