2 replies to this topic

[perera]

Olá pessoal,
Estou com um problema em um menu feito em CSS na "mmerda" do IE 6 e feito uma pesquisa vi que mais de 60% usam IE6 no meu site portanto preciso adptar para essa droga.

Enfim não sei como posso fazer isso.

Primeiro vou mostrar uma imagem no FF e no IE7~8
 1.jpg   6.39KB   10 downloads


Agora o mesmo meu no IE6
 2.jpg   4.37KB   9 downloads

No IE 6 o meu fica grande e não sei como posso deixar normal

Ai vai o código:

#menu {	background: #3D6946; list-style: none; font-size: 11px; margin: 0; padding: 0; width: 160px;}
#menu li { font-family: Verdana, Geneva, sans-serif; font-size: 11px; margin: 0; padding: 0;}
#menu a { background: #3D6946; font-size: 11px; border-bottom: 1px solid #13391a; color: #fff; display: block; margin: 0; padding: 3px 8px;	text-decoration: none;	font-weight:normal;}
#menu a:hover {
	background: #13391a url("imagens/menu/imagens/hover.gif") left center no-repeat;
	color: #fff;
	padding-bottom: 5px 8px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
}

E o menu coloco assim:

<ul id="menu">
	<li><a href="?pg=informacoes/armas" >Armas</a></li>
	<li><a href="?pg=informacoes/artigos" >Artigos</a></li>
	<li><a href="?pg=informacoes/cheats" >Cheats</a></li>
	<li><a href="?pg=informacoes/conquistasetrofeus" >Conquistas / Trof&eacute;us</a></li>
	<li><a href="?pg=informacoes/detalhesgerais" >Detalhes Gerais</a></li>
	 <li><a href="?pg=informacoes/mapa" >Mapa</a></li>
	 <li><a href="?pg=informacoes/subway" >Sub-Way</a></li>
	 <li><a href="?pg=informacoes/multiplayer" >Multiplayer</a></li>
	 <li><a href="?pg=informacoes/radios" >R&aacute;dios</a></li>
	 <li><a href="?pg=informacoes/personagens" >Personagens</a></li>
	 <li><a href="?pg=informacoes/previews" >Previews</a></li>
	 <li><a href="?pg=informacoes/review" >Review</a></li>
	 <li><a href="?pg=informacoes/veiculos" >Ve&iacute;culos</a></li>
	 <li><a href="?pg=informacoes/visaogeral" >Vis&atilde;o Geral</a></li>
		</ul>

E aproveitando o tópico, usei algumas imagens em png transparent.. existe um fix para o ie6 (o fundo fica branco) ?

Valeu pela atenção.

Edição feita por: perera, 17/10/2009, 00:41.

[douglash]

Olá, tente assim:

ul#menu {	background: #3D6946; list-style: none; font-size: 11px; margin: 0; padding: 0; width: 160px;}
ul#menu li { margin: 0; padding: 0; border-bottom:1px solid black;}
#menu li a {  
background: #3D6946; font:11px Verdana, Geneva, sans-serif; color: #fff; display: block; margin: 0; padding: 3px 8px; text-decoration: none; font-weight:normal;}
ul#menu li a:hover {
	background: #13391a url("imagens/menu/imagens/hover.gif") left center no-repeat;
	color: #fff;

Ou também de um modo em que na minha opinião ficaria melhor semânticamente:

CSS:

*{margin:0;padding:0;line-height:1;}
#menu { margin: 0; padding: 0; width: 160px; border:1px solid black;}
#menu ul{list-style: none;}
#menu ul li {border-bottom:1px solid black;}
#menu ul li a {background: #3D6946;color: #fff; display: block;padding: 3px 8px; text-decoration: none; font-weight:normal;}
#menu ul li a:hover {background: #13391a url("imagens/menu/imagens/hover.gif") left center no-repeat; color: #fff;}

XHTML:

<div id="menu">
  <ul>
   <li><a href="?pg=informacoes/armas" >Armas</a></li>
   <li><a href="?pg=informacoes/artigos" >Artigos</a></li>
   <li><a href="?pg=informacoes/cheats" >Cheats</a></li>
   <li><a href="?pg=informacoes/conquistasetrofeus" >Conquistas / Trof&eacute;us</a></li>
   <li><a href="?pg=informacoes/detalhesgerais" >Detalhes Gerais</a></li>
   <li><a href="?pg=informacoes/mapa" >Mapa</a></li>
   <li><a href="?pg=informacoes/subway" >Sub-Way</a></li>
   <li><a href="?pg=informacoes/multiplayer" >Multiplayer</a></li>
   <li><a href="?pg=informacoes/radios" >R&aacute;dios</a></li>
   <li><a href="?pg=informacoes/personagens" >Personagens</a></li>
   <li><a href="?pg=informacoes/previews" >Previews</a></li>
   <li><a href="?pg=informacoes/review" >Review</a></li>
   <li><a href="?pg=informacoes/veiculos" >Ve&iacute;culos</a></li>
   <li><a href="?pg=informacoes/visaogeral" >Vis&atilde;o Geral</a></li>
  </ul>
</div>

E sobre o fix do png transparent.. existe varios fixs para o ie6 mas até agora o que eu achei simples e funcional foi o DD_belatedPNG.js, os outros métodos não funcionam corretamente, alguns não implementão o background-position, background-repeat entre outras coisas.. então baixe este *.js neste link e após implemente no seu código este script em forma de comentário para o IE6:

<!--[if IE 6]>
<script src="DD_belatedPNG.js" type="text/javascript"></script>
<script>
/*Adicione na linhe abaixo, entre os parênteses, o elemento desejado*/
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Na linha "DD_belatedPNG.fix('.png_bg');" vc adiciona os elementos que possuem o png tranparent.

Edição feita por: douglash, 17/10/2009, 18:16.

[perera]

Dos dois modos funcionou muito bem.
PNG também está funcionando

Nem sei como agradecer, muito obrigado mesmo pelo tempo