Ir para conteúdo

POWERED BY:

Arquivado

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

Fabio Jp

[Resolvido] Menu Dropdown - Problemas com IE6 ( trasnparencia )

Por , em Desenvolvimento frontend

Recommended Posts

Fabio Jp    0

Fabio Jp
Postado

Ae..

 

Dei uma limpada BASICA no código e acrescentei CSS Sprite..

Mas ainda ta dando a piscada.. agora da para ver perfeitamente a piscada que o ie6 da..

E eu to achando que é por causa desse espaçamento que ele tira não sei da onde.. veja..

IE6

Imagem Postada

 

Firefox

Imagem Postada

 

 

Vou postar o código completo dessa vez..

Obs: Estou usando DD_belatedPNG..

Todas as imagens estão online...

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testando o menu drop-down</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE 6]>
<script src="http://www.preccisa.com.br/rei/sprites/scripts/DD_belatedPNG.js" type="text/javascript" language="javascript"></script>
<script>
  DD_belatedPNG.fix('img, ul#menu li a');
</script>
<![endif]-->
<script type="text/javascript">
function horizontal() {

   var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");
    
   for (var i=0; i< navItems.length; i++) {
      if(navItems[i].className == "submenu")
      {
         if(navItems[i].getElementsByTagName('ul')[0] != null)
         {
            navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.background = "#fff url(http://www.preccisa.com.br/rei/sprites/images/cabecalho-submenu-seta-hover.gif) no-repeat 63px 22px";}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.background = "#c2c1c1";}
         }
      }
   }

}
</script>

<style type="text/css">
/* zera tudo */
html, body, form, fieldset, p, a, ul, ol, li, div, legend, label, br, input, button, textarea, h1, h2, h3, h4, h5, strong {
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	font-style:normal;
	font-size:12px;
	font-family:verdana, arial, tahoma, sans-serif;
	vertical-align:baseline;
	background-color:none;
	color:#000;
	line-height:1;
	text-align:left;
}
/* --------- */

body {background:url(http://www.preccisa.com.br/rei/sprites/images/aa.jpg) repeat 0 0;}

/* Esses são os menus principais */
ul.menubar li.submenu{
	background:#c2c1c1; /* gambiarra para o dropmenu ficar selecionado ao descer nos submenus */
	display:inline;
	list-style: none;
	float:left;
}

/* Preparando css sprite.. note que tive que usar padding para chegar a altura de 22px, pois usando height ele quebra o menu */
ul.menubar li.submenu a:link,
ul.menubar li.submenu a:visited {
	display:block;
	text-decoration: none;
	color: #000;
	font-weight:bold;
	text-decoration:none;
	background:url(http://www.preccisa.com.br/rei/sprites/images/menu-fundo.gif);
	padding:8px 7px 8px 7px;
}

/* css sprite para o menu principal */
ul.menubar li.submenu a.menu-depois {background-position:0px 0px;}
ul.menubar li.submenu a.menu-depois:hover,
ul.menubar li.submenu a.menu-depois:active {
	background-position: 0px -28px;
	color:#bc2724;
}
/* --------- */

/* gambiarra para o dropmenu ficar selecionado ao descer nos submenus */
a#sem-fundo:link, a#sem-fundo:visited {
	background:url(http://www.preccisa.com.br/rei/images/cabecalho-submenu-seta.gif) no-repeat 63px 22px;
}
a#sem-fundo:hover, a#sem-fundo:active {
	color:#bc2724;
	background:url(http://www.preccisa.com.br/rei/images/cabecalho-submenu-seta-hover.gif) no-repeat 63px 22px;
}
/* --------- */

/* esconde o menu dropdown */
ul.menubar ul#menu{
	display: none;
	position: absolute;
	margin: 0px;
}

/* esconde o menu dropdown */
ul#menu li{
	position:relative;
	list-style: none;
}

/* preparando menu dropdown para receber css sprite */
ul#menu li a:link,
ul#menu li a:visited {
	height:20px;
	display: block;
	text-indent:25px;
	text-decoration:none;
	color: #000;
	padding:5px 0 0 0;
	background:url(http://www.preccisa.com.br/rei/sprites/images/menu-drop-fundo.png);
}

/* css sprite */
ul#menu li a.depois {background-position:0px 0px; width:175px;}
ul#menu li a.depois:hover,
ul#menu li a.depois:active {
	background-position: 0px -25px;
	color:#bc2724;
	}
/* --------- */
</style>

</head>

<body onload="horizontal();">

<ul id="menu_dropdown" class="menubar">
	<li class="submenu"><a class="menu-depois" href="index.htm">Home</a></li>
	<li class="submenu"><a class="menu-depois" href="empresa.htm">Empresa</a></li>
	<li class="submenu"><a id="sem-fundo" href="#">Produtos</a>
		<ul id="menu">

			<li><a class="depois" href="#">Disco de Corte</a></li>
			<li><a class="depois" href="#">Disco de Desbaste</a></li>
			<li><a class="depois" href="#">Rebolos em Geral</a></li>
			<li><a class="depois" href="#">Ponta Montada</a></li>
		</ul>
	</li>
	<li class="submenu"><a class="menu-depois" href="quem-somos.htm">Informações ao Usuário</a></li>
	<li class="submenu"><a class="menu-depois" href="contato.htm">Contato</a></li>
</ul>
</body>
</html>

 

 

No firefox e Chrome funciona perfeitamente.. mas no ie6 ele pisca.. e da esse espaçamento que

eu postei na imagem que eu não sei da onde ele ta tirando..

 

 

:D

 

 

Quem puder dar uma olhada eu agradeço..

 

Valeww..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

To pesquisando mais ta complicado..

Nada se parece com o meu caso..

Não to conseguindo saber de onde o ie6 ta colocando aquele espaçamento..

E o hack antigo para o ie não serve mais no meu menu..

 

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* html ul.menu li a { height: 1%; }
/* End */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Aee.. fiz e ficou bala rsrs.. funcionando em todos os navegares..

Mas agora não vou poder mais usar no site sahsuahusauhuas..

ai ai ai..

 

Segue ai o link para quem quiser utilizar..

Tem um js para ao passar o mouse, ele manter o menu selecionado..

Feito com DD_belatedPNG..

E configurado com um pouco de css..

 

 

Segue o link

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