Problema com filter gradient no ie8

[Damon 20]

Bom dia pessoal.

 

É impressionante como que esse ie da dor de cabeça na gente !!hehe

 

Eu estou com um menu drop down que tem como fundo um gradient esta funcionado em todos os navegadores exceto no ie8.

Até no ie7 funciona perfeitamente mas como nem tudo é um mar de rosa né fazer o que!!

 

Bem deixa eu constatar o que esta acontecendo, o gradient esta funcionado acontece que o sub-menu não aparece no ie8,

verifiquei, e não é problema com os position que geralmente é o que mais da problema no ie6 e ie7, fui ver é o filter que esta impedindo o sub-menu de aparecer, quando eu retiro o filter ele funciona perfeitamente.

 

Eu poderia deixa sem o gradient mais ficaria muito diferente dos outros navegadores.

Vou posta o código para vcs me ajudar a encontra uma solução.

.menu{
	
	list-style:none;
	float:left; 
	margin-left:440px;
	margin-top:-120px;
	background: #275e26; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjc1ZTI2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTYlIiBzdG9wLWNvbG9yPSIjMDY4OTJiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzglIiBzdG9wLWNvbG9yPSIjOGFiNjZiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhhYjY2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOWRlOTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(-45deg, #275e26 0%, #06892b 16%, #8ab66b 38%, #8ab66b 100%, #c9de96 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#275e26), color-stop(16%,#06892b), color-stop(38%,#8ab66b), color-stop(100%,#8ab66b), color-stop(100%,#c9de96)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, #275e26 0%,#06892b 16%,#8ab66b 38%,#8ab66b 100%,#c9de96 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, #275e26 0%,#06892b 16%,#8ab66b 38%,#8ab66b 100%,#c9de96 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, #275e26 0%,#06892b 16%,#8ab66b 38%,#8ab66b 100%,#c9de96 100%); /* IE10+ */
	background: linear-gradient(135deg, #275e26 0%,#06892b 16%,#8ab66b 38%,#8ab66b 100%,#c9de96 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#275e26', endColorstr='#c9de96',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#275e26', endColorstr='#c9de96',GradientType=1 )";
	height:45px;
	
	
	
}

.menu li{
	position:relative; 
	float:left; 
	border-right:1px solid #c0c0c0;

	
	
	
}


.menu li a{
	color:#FFF; 
	text-decoration:none; 
	padding:5px 10px; 
	display:block;
	font-family:Palatino Linotype, Palatino;
	font-weight:bold;
	font-size: 15px;
	margin-top:13px;

	
}
	


.menu li:hover{
	background:#030; 
	height:45px;
	
	
}




.menu li ul{
	position:absolute; 
	top:46px; 
	left:0;
	display:none; 
	height:20px;
	z-index:3;
	
	
	
	
}


.menu li:hover ul, .menu li.over ul{
	display:block;
	
	
	
}

.menu li ul li{
	display:block;
	width:140px;
	height:23px;
	border-bottom:1px solid #c0c0c0;
	background-color:#030;
	padding:3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	
		
}


.menu li ul li:hover{
	height:23px;
	background:#99CC66;
	
	
	
}
	
.menu li ul li a{
	margin-top:-5px;
	font-family:Palatino Linotype, Palatino;
	font-weight:bold;
	font-size: 13px;
	

	
	
} 

[Damon 20]

E ai pessoal

Problema resolvido, como eu estava precisando de uma solução rápida então eu fiz o seguinte,

criei uma imagem com o mesmo efeito gradient e coloquei de fundo e deu certinho.

Para quem tiver passando pelo mesmo problema esta é uma solução rápida, acredito que dever ter como resolver com css3 usando pie, mas não procurei muito por que o tempo ta meio corrido.

 

Grande abraço a todos que estão lendo.