css - Background-color displaying incorrectly in IE8 and IE9

Background-color displaying incorrectly in IE8 and IE9

I have a megamenu that works perfectly in Chrome, Firefox and IE10. However in versions IE9 and below there is a problem with the background-color property of the menu bar - instead of being a dark gray, it is showing as white. I am using a custom css file to modify the T3v3 framework css file and the bootstrap css file The URL in question is www.minsteadtt.org - it is using the T3v3 framework. The css for the property in question is as follows:

.t3-mainnav {
  background-image: none;
  background-color: #676767; 
  border: none;
  font-size: .9em;
}

Can anyone explain why the dark gray property is not registering in IE8 and 9?

Add filter: none; to your t3-mainnav class. That should fix it!

.t3-mainnav {
  background-image: none;
  background-color: #676767; 
  border: none;
  font-size: .9em;
  filter: none !important;

}

source - http://stackoverflow.com/questions/19127161/background-color-displaying-incorrectly-in-ie8-and-ie9