Problemas com menupopup vertical no IE 6

Olá pessoal passei o dia tentando resolver isso e não consegui sera que alguem poderia dar uma luz?

http://www.areacreations.com.br/projetos/bms

css: http://www.areacreations.com.br/projetos/bms/css/geral.css A parte do menu popup está no fim do css , marcado comcomentários.

js: http://www.arecreations.com.br/projetos/bms/js/menu.js

Para não dar esse problema você deve fazer um pré-carregamento dessa imagem.

Sei, mas como eu faria isso? Nunca ouvi falar disso...

Seria oque esse cara desse link está dizendo:

http://www.inerciasensorial.com.br/2005/11...arregar-imagem/

Mas minhas imagens estão no background de um objeto passado no css... não chamo elas hora nenhuma no meu html a não ser o css.

Não testei o script, mas acho que é isso:

var imagem = new Image();imagem.src = "../imagens/comum/menu_over.jpg";sfHover = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; this.getElementsByTagName("a")[0].style.backgroundImage = "url("+imagem.src+")"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); this.getElementsByTagName("a")[0].style.backgroundImage = "none"; }	}}if (window.attachEvent) window.attachEvent("onload", sfHover);

Teste ai, você não vai colocar imagem no link no a:hover e sim com esse script.

Olá hunter coloquei seu código no meu js...Deu uma melhorada de alguns milisegundos mas ainda ta esquisito.Não entendo, as imagens são tão pequenas, pq demora a carregar?

Olha eu abri no IE6 e no IE7 e a imagem abriu instantaneamente, até apaguei todos os arquivos off-line, mas reparei numa coisa no IE7 o menu está com bug, os submenus estão aparecendo uns 100px mais distantes do menu.PS: qualquer coisa separe o código do menu o css e o js e poste aqui.

Solução mais simples:

• http://www.web2ponto0.com.br/video-1-css-sprites/

Olá hunter, já estou ficando doido com esse negócio.

No meu continua dando pau... quando passo o mouse por cima somem todas as imagens e só depois começa a carregar, da o mesmo pau...

Oque você disse do IE7 deve ser por causa deste trecho do meu css:

#nav li ul

{ /sub items do menu popup/

	position: absolute;

	left: -999em;

	margin-left:147px;

	_margin-left : 75px; /*Apenas para IE6*/

	margin-top : -25px;

}

Coloco o _margin para o IE colocar os submenus no lugar certo pq ele não esses 147px que todos os outros navegadores leem do mesmo jeito. E o IE7 deve ler _margin também...

f***... não sei mais o que fazer...

você não sabe algum lugar que tenha um tutorial bom para isso??? Eu peguei do suckerfish mas ta essa m***** pq os caras não usaram imagens no menu dele.

To postando o código do meu css:

/########-MENU POP UP-############/#nav, #nav ul { / propriedades de todas as listas lists / padding: 0; margin:0px 1px 0px 1px; list-style: none; float : left; width : 146px; height:25px; font-family:tahoma; font-size:11px; text-align:center;} #nav li { / items da lista / position : relative; float : left; line-height : 25px; margin-bottom : -1px; width: 146px; color:#5a5a5a; background-image:url(../imagens/comum/menu.jpg);} #nav li ul{ /sub items do menu popup/ position: absolute; left: -999em; margin-left:147px; _margin-left : 75px; /Apenas para IE6/ margin-top : -25px;} #nav li ul ul { /terceiro ou mais sub items / left: -999em;} #nav li a { width: 146px; display : block; text-decoration : none; color:#333333;}/#nav li a:hover { background-image:url(../imagens/comum/menu_over.jpg); color: #FFFFFF;}/ #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto;}

Código do meu JS:

var imagem = new Image();imagem.src = "../imagens/comum/menu_over.jpg";sfHover = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; this.getElementsByTagName("a")[0].style.backgroundImage = "url("+imagem.src+")"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); this.getElementsByTagName("a")[0].style.backgroundImage = "none"; }	}}if (window.attachEvent) window.attachEvent("onload", sfHover);

Meu HTML:

<div id="menu"> <ul id="nav"> <li><a href="">HEADLINE</a></li> <li><a href="">ARTIGOS</a> <ul> <li><a href="">Artigo Técnico</a></li> <li><a href="">Gestão Empresarial</a></li> <li><a href="">Internet</a></li> <li><a href="">Saúde Ocupacional</a></li> </ul> </li> <li><a href="">NEGÓCIOS</a> <ul> <li><a href="">Fornecedores</a></li> <li><a href="">Equipamentos Usados</a></li> <li><a href="">Empregos</a></li> <li><a href="">Licitações</a></li> </ul> </li> <li><a href="">EVENTOS</a></li> <li><a href="">MINERADORAS</a></li> <li><a href="">CONTATO</a> <ul> <li><a href="">Anuncie Aqui</a></li> <li><a href="">Fale Conosco</a></li> <li><a href="">Nossa Empresa</a></li> </ul> </li> <li><a href="">LINKS</a> <ul> <li><a href="">bancos</a></li> <li><a href="">bolsas de metais</a></li> <li><a href="">bolsas de valores</a></li> <li><a href="">índices econômicos</a></li> <li><a href="">índices americanos</a></li> <li><a href="">livrarias</a></li> <li><a href="">órgãos governamentais</a></li> <li><a href="">órgãos não governamentais</a></li> <li><a href="">revistas</a></li> <li><a href="">universidades</a></li> </ul> </li> </ul> </div>

Eu não olhei o seu código ainda, mas eu postei um aqui que funciona no IE6, IE7, FF, Opera, da uma olhada nele funcionando: http://hunternh.110mb.com/menu/horizontal_e_vetical.html

Solução mais simples:- http://www.web2ponto0.com.br/video-1-css-sprites/

Inside ,não consegui visualizar o video nem instalando o codec que você passou.

Eu não olhei o seu código ainda, mas eu postei um aqui que funciona no IE6, IE7, FF, Opera, da uma olhada nele funcionando: http://hunternh.110mb.com/menu/horizontal_e_vetical.html

Esse menu tem o mesmo problema que o meu, ele funciona bem sem imagem, quando coloco imagem de background da pau...Achei esse aqui mas ele também da o mesmo pau:http://www.seoconsultants.com/nav/x/left-mother.aspAlguem pode me ajudar?

Se você pudesse ver meu vídeo estaria sendo útil...

• http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/

Neste eu também mostro a mesma técnica, mas não é específico, por isso é maior...

[]'s

Ta resolvido, ja fica como script para que quiser usar:

E uma coisa interessante fazendo essas alterações eu reparei numa coisa que não tinha visto antes que no IE7 isso não funciona html ul.menu li a { height: 1%;} tem que ser ul.menu li a { height: 1%;}:

Bom testa o script agora.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Menu horizontal e vertical</title><script type="text/javascript">//<![CDATA[var imagens = new Array(new Image(), new Image());imagens[0].src = "menu.jpg";imagens[1].src = "menu_over.jpg";function vertical(){	var navItems = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i< navItems.length; i++)	{ navItems[i].onmouseover=function() { if(this.className == "submenu")this.getElementsByTagName('ul')[0].style.display="block"; this.style.backgroundImage = "url("+imagens[1].src+")"; } navItems[i].onmouseout=function() { if(this.className == "submenu")this.getElementsByTagName('ul')[0].style.display="none"; this.style.backgroundImage = "url("+imagens[0].src+")"; }	}}//]]></script><style type="text/css">body { font: normal 62.5% verdana; }ul.menu,ul.menu ul{	margin: 0;	padding: 0;	border-bottom: 1px solid #ccc;	width: 146px; /* Width of Menu Items */	background-color: #FFFFFF; /* IE6 Bug */}ul.menu li{	position: relative;	list-style: none;	border: 0px;	background: transparent url(menu.jpg) center center no-repeat;}ul.menu li a{	display: block;	text-decoration: none;	border: 1px solid #ccc;	border-bottom: 0px;	color: #6090C0;	padding: 5px 10px 5px 5px;}/* Fix IE. Hide from IE Mac \*/* html ul.menu li { float: left; height: 1%; }* ul.menu li a { height: 1%;}/* End */ul.menu ul{	position: absolute;	display: none;	left: 145px; /* Set 1px less than menu width */	top: 0px;}ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ul.menu a.seta { background: transparent url(arrow.gif) right center no-repeat; }ul.menu li a:hover { color: #FFFFFF; }</style></head><body onload="vertical();"><ul id="nav" class="menu"> <li><a href="#">Home</a></li> <li class="submenu"><a href="#" class="seta">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li>	</ul> </li> <li class="submenu"><a href="#" class="seta">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li class="submenu"><a href="#" class="seta">Hosting</a> <ul> <li><a href="#">Dedicated</a></li> <li class="submenu"><a href="#" class="seta">Virtual</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> <li><a href="#">Shared</a></li> <li><a href="#">Managed</a></li> </ul> </li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li>	</ul> </li> <li class="submenu"><a href="#" class="seta">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li>	</ul> </li></ul></body></html>

Boa hunter muito legal... Eu tinha resolvido usando o código em js dessa forma:

try { document.execCommand("BackgroundImageCache", false, true); } catch(err) {}

Mas não sei pq não está funcionando no Opera, e o código que você fez está funcionando no opera... Logo sua solução é bem melhor.... Muito obrigado cara.

Testei na web parece estar funcionando, amanhã vou testar no projeto, obrigado.

Link do menu funcionando:

http://www.areacreations.com.br/projetos/menu/teste.html

Nesse link que você postou está com problema, estou postando o código em .rar para download:

http://hunternh.110mb.com/menu/menu.rar

Olá Hunternh. Continua dando o flick do IE6, acessa ai http://www.areacreations.com.br/projetos/menu/vetical.html, acho que tem que usar:

try { document.execCommand("BackgroundImageCache", false, true); } catch(err) {}

Aqui Hunternh, concertei o flick... da uma olhda:

http://www.areacreations.com.br/projetos/menu/vetical.html

Lembrando que para perceber o flick tem que ativar:

IE6 -> ferramentas/opcoes de internet/configurações e marcar "A cada visita a página"

A demora pra carregar a imagem ainda está acontecendo:

Eu fiz as alterações e deixei exatamente como você quer, da uma olhada se aqui está acontecendo esse problema para você: http://hunternh.110mb.com/menu/vetical.html

Funcionou, tanto a opção que eu tinha mandado antes quanto a sua... Valeu cara, muito obrigado pela ajuda.

Abraços. Boa sorte ai ajudando os outros no forum. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif