Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brentan

Background não funciona no IE

Por , em Desenvolvimento frontend

Recommended Posts

brentan    0

brentan
Postado

Como posso preencher uma cor no meu menu horizontal que funcione no IE9.

Sempre quando coloco uma cor no menu apenas não funciona no IE9.

 

Exemplo de linha de código que não funciona no IE9:

 

#cssmenu{border-color:#000;background:#61230C} <!-- o background não funciona no IE-->

 

 

Segue código com problema:

 

 

</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="menu/styles.css" rel="stylesheet" type="text/css"> <!-- menu da página -->
</head>
<body>
<table width="1156" height="1010" align="center">
<tr>
<td height="48"> </td>
<td colspan="3" align="center" valign="top"><div id='cssmenu'>
<!-- \\menu da página início-->
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='Artigos.html'><span>Artigos</span></a></li>
<li class='has-sub'><a href='#'><span>Ma</span></a>
<ul>
<li><a href='#'><span>Amor</span></a></li>
<li class='last'><a href='#'><span>Paz</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Pi</span></a>
<ul>
<li><a href='#'><span>Abstrato</span></a></li>
<li class='last'><a href='#'><span>Paisagens</span></a></li>
<li class='last'><a href='#'><span>Pessoas</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Qua</span></a>
<ul>
<li><a href='#'><span>Cida</span></a></li>
<li class='last'><a href='#'><span>Ade</span></a></li>
<li class='last'><a href='#'><span>Ro</span></a></li>
<li class='last'><a href='#'><span>Be</span></a></li>
</ul>
</li>
<li><a href='#'><span>Quem somos</span></a></li>
<li class='last'><a href='#'><span>Contato</span></a></li>
</ul>
</div></td><!-- \\menu da página fim-->
<td> </td>
</tr>
</table>
</body>
</html>
Agora o código em CSS, onde ocorre a configuração:
#cssmenu{ height:40px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px;}
#cssmenu > ul {list-style:inside none; padding:0; margin:0; position:relative; 50%;margin-left: 150px;width: 990px;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 15px/100% Comic Sans MS, cursive; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999;}
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block; border: 1px solid #222;}
#cssmenu ul li.has-sub > a:hover{border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999;border-color:#3f3f3f; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:11pt Comic Sans MS, cursive; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover{
background: #333333;
background: -moz-linear-gradient(top, #333333 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #333333 0%,#222222 100%);
background: -o-linear-gradient(top, #333333 0%,#222222 100%);
background: -ms-linear-gradient(top, #333333 0%,#222222 100%);
background: linear-gradient(top, #333333 0%,#222222 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); -webkit-box-shadow: 0 3px 10px 0 #ccc;
text-shadow: 0px 0px 5px #fff;
border: 1px solid #fff;
font-family: Comic Sans MS, cursive;
}
#cssmenu{border-color:#000;background:#61230C}
<!-- o background não funciona no IE-->
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{-webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; border-radius:#fff; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

brentan    0

brentan
Postado

Desculpe, mas acho que isso não resolve.

 

Alguém tem alguma ideia para solucionar este problema.

 

 

Agradeço a ajuda!!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado

Mas você é um gênio eim, já sabe que tal solução não resolve então porque vem perguntar aqui?

Tenta o que te falei cara, o IE é ignorante. Float, widht e height.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heitor Sousa    9

Heitor Sousa
Postado

tira a seguinte linha:

filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 );

que funciona nos dois

 

obs.:cuidado esse código tah meio bagunçado

Compartilhar este post

Link para o post
Compartilhar em outros sites

brentan    0

brentan
Postado

Heitor Sousa,

 

Realmente resolveu todos os meus problemas com relação ao menu, que eram mais que aquela simples linha.

 

Quanto ao código estar meio bagunçado, era pq enviei apenas um exemplo e já estou organizando através de div e outros.

 

Agradeço pela ajuda.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heitor Sousa    9

Heitor Sousa
Postado

Heitor Sousa,

 

Realmente resolveu todos os meus problemas com relação ao menu, que eram mais que aquela simples linha.

 

Quanto ao código estar meio bagunçado, era pq enviei apenas um exemplo e já estou organizando através de div e outros.

 

Agradeço pela ajuda.

 

Obrigado.

Valeeuu

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito