Publicado em 27 de dez.

[Resolvido] Border radius no ie

ola, adicionei o border radius em alguns elementos, funciona no chrome, funciona no mozilla, mas nao funciona no ie...

alguem sabe como posso fazer para funcionar?

html

<div id="menu">
<ul>
 <li><a href="index.php">Início</a></li>
 <li><a href="empresa.php">Empresa</a></li>
 <li><a href="servicos.php">Serviços</a></li>
 <li><a href="#">Contato</a>
 <ul>
 <li><a href="faleconosco.php">Fale Conosco</a></li>
 <li><a href="local.php">Localização</a></li>
 </ul>

	</li>
</ul>

</div>

css

#menu{
	top:22px;
	float:right;
	position:relative;
	background: url('imagens/fundomenu.png') repeat-x;
	width:362px;
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}

#menu ul{

	list-style: none;
	margin: 0;
	padding:0;

}

#menu ul li{

display: inline;
}

#menu ul li a{

float:left;
text-decoration: none;
color:#FFF;
font-family: Tahoma;
font-size: 20px;
padding: 10px 11px 10px 13px;
}

#menu ul li a:hover{

	background: url('imagens/menuhover.png') repeat-x;
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#menu ul li ul{

display: none;
width:125px;
right:0;
top:44px;
position: absolute;
z-index: 9999999999999999;

background: #445151; / Old browsers /
/ IE9 SVG, needs conditional override of 'filter' to 'none' /
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NTE1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZDY3NjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
background: -moz-linear-gradient(top, #445151 0%, #5d6769 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#445151), color-stop(100%,#5d6769)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #445151 0%,#5d6769 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #445151 0%,#5d6769 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, #445151 0%,#5d6769 100%); / IE10+ /
background: linear-gradient(to bottom, #445151 0%,#5d6769 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#445151', endColorstr='#5d6769',GradientType=0 ); / IE6-8 /

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior:url('border-radius.htc');

}

#menu ul li:hover ul{

display: block;
float:left;
}

#menu ul li ul li a{

font-size:16px;
width: 101px;
}

#menu ul li ul li a:hover{

background: url('imagens/menuhover.png');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding-bottom: 10px;
behavior: url('PIE.htc');
}

quero colocar o border radius no: #menu ul li ul{}

espero que me deem uma luz, esse internet explorer ferra com tudo...

obrigado

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Marco Bruno· 27 de dez.

Boa tarde, MatheusSilva.

O border-radius funciona a partir do IE9:

http://caniuse.com/#feat=border-radius

MatheusSilva· 27 de dez.

boa tarde marco, mas chegamos á um empasse entao, tenho aqui o ie9 e o mesmo nao funcionou.

O legal é que no chrome/firefox funcionou direito, mas nessa bagaça de ie nao funciona de jeito algum

tem algum cheat que possa fazer pra funcionar ?

Nícolas Luís Huber· 27 de dez.

Você tem certeza que está utilizando o IE9, pois a propriedade border-radius funciona perfeitamente no IE9. Verifique se a opção que aparece nesta imagem está desmarcada.

MatheusSilva· 27 de dez.

ta sim

/applications/core/interface/imageproxy/imageproxy.php?img=http://i50.tinypic.com/2qthk06.png&key=59bae63f2ddfba26d3694c46d034e187a0a204073fa22e8c8ce52509a564d3df" alt="2qthk06.png" />

esse em vermelho era pra tar com a borda

MafnGamer· 28 de dez.

Ae cara tente botar esses dois códigos de border radius.

//Border radius padrão
border-radius: 10px;

//esse não sei se funciona
-ms-border-radius: 10px;

Tenta ai e posta o resultado.

MatheusSilva· 28 de dez.

ja tinha isso ai, mas ok...pescebi que ele ta dando conflito com o gradient..

to usando este codigo

/ IE9 SVG, needs conditional override of 'filter' to 'none' /
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NTE1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZDY3NjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+');
background: -moz-linear-gradient(top, #445151 0%, #5d6769 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#445151), color-stop(100%,#5d6769)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #445151 0%,#5d6769 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #445151 0%,#5d6769 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, #445151 0%,#5d6769 100%); / IE10+ /
background: linear-gradient(to bottom, #445151 0%,#5d6769 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#445151', endColorstr='#5d6769',GradientType=0 ); / IE6-8 /

q raios pode ser?

EDIT---------

COnsegui pessoal, simplesmente adicionei no inicio da pagina:

<!--[if gte IE 9]>

 <style type="text/css">

	#menu ul li ul {

 filter: none;

	}

 </style>

<![endif]-->