How to prevent IE Filters from covering up background image

The site is here. When the button in the menu is clicked, Internet Explorer will hide the icons. This is not the beha开发者_C百科vior in other browsers. The icon is a background of <a> for it to be click-able. Is there a way to show the icon when clicked?

Is it possible, using only CSS, that when <a> is clicked the filter would be applied to <li>?

This way, <a>'s background icon would be preserved.

I found a solution to your problem. Replace this code:

<!--[if IE]><style type="text/css">
#menu li a:active {
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66')";
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66');
    padding: 39px 0px 2px 0px;
    margin-bottom:1px;
}
</style><![EndIf]-->

With:

<!--[if IE]><style type="text/css">
#menu li a:active {
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66') progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://lh5.googleusercontent.com/_qvhVKLFln2A/TZ8U5OiFLlI/AAAAAAAAHqg/7OQqVItePoo/menu_icon.png')";
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#ccff66') progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://lh5.googleusercontent.com/_qvhVKLFln2A/TZ8U5OiFLlI/AAAAAAAAHqg/7OQqVItePoo/menu_icon.png');

    padding: 39px 0px 2px 0px;
    margin-bottom:1px;
}
</style><![EndIf]-->

You will get the same background image in every link. The solution to this is to just have separate images for every link: information, chat,...

The reason why we see this bug, is because it draws the gradient over the icon, so as a temporary workaround, here is fix for IE. Where you have the last conditional tag, put the transparent color as the endColorStr.

<!--[if IE]><style type="text/css">
#menu li a:active {
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#000000ff')";
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#476c2c', endColorstr='#000000ff');
    padding: 39px 0px 2px 0px;
    margin-bottom:1px;
}
</style><![EndIf]-->

Have you tried setting "a:active" or possibly "a:visited" with the same background?

W3Schools CSS :active Selector