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

Estou com problemas na transparencia na verdade..

Usei DD_belatedPNG mas dava uma piscada nos submenus que descem

do link Produtos, piscava ao passar o mouse de um link para o outro..

Agora estou usando iepngfix, e a imagem transparente fica em um link (a),

e ao declarar que desejo transparencia tb a essa tag (a), ele não funciona..

No firefox esta tudo direitinho mas no IE6 como sempre ta tenso de arrumar..

 

Link para visualizar o site completo : http://www.preccisa.com.br/rei/index.htm

 

Códigos:

 

 

index.htm

<!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>Rei Abrasivos</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<script src="scripts/menu.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/iepngfix_tilebg.js"></script>
</head>

<body onload="horizontal();">
<div id="tudo">
	<div id="cabecalho" class="cab-index">
		<div id="logo-titulo">
			<h1><a href="index.htm" title="Rei Abrasivos">Rei Abrasivos</a></h1>
            <p class="index"></p>
		</div>
		<div id="menu_drop">
        	<ul id="menu_dropdown" class="menubar">
        		<li class="submenu"><a href="#">Empresa</a></li>
        		<li class="submenu" id="submenu-desce"><a href="#">Produtos</a>
        			<ul class="menu">
        				<li><a href="#">Disco de Corte</a></li>
        				<li><a href="#">Disco de Desbaste</a></li>
        				<li><a href="#">Rebolos em Geral</a></li>
        				<li><a href="#">Ponta Montada</a></li>
        			</ul>
        		</li>
        		<li class="submenu"><a href="#">Quem Somos</a></li>
        		<li class="submenu"><a href="#">Destaques</a></li>
        		<li class="submenu"><a href="#">Contato</a></li>
        	</ul>
		</div>
	</div>
    <div id="conteudo">

    </div>
    <div id="rodape">
    
    </div>
</div>
</body>
</html>

 

estilo.css

img, div, ul, li {behavior:url("css/iepngfix.htc")}

/* defaut em 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:100%;
	font-family:verdana, arial, tahoma, sans-serif;
	vertical-align:baseline;
	background-color:none;
	color:#000;
	line-height:1;
	text-align:left;
}
/*---------------*/

body {
	background-color:#ccc;
}

div#tudo {
	width:778px;
	margin:0 auto;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
}

div#cabecalho {
	width:778px;
	height:auto;
	padding:19px 0 0 0;
}
/********    CABEÇALHOS    ********/
div.cab-index {background:#c2c1c1;}
div.cab-empresa {background:#c2c1c1 url(../images/cab-empresa.jpg) no-repeat 0 0;}
/*---------------*/

div#logo-titulo {
	float:left;
	width:778px;
	height:95px;
	background:url(../images/cabecalho-traco-transparencia.png) repeat-x 0 0;
}
div#logo-titulo h1 {
	float:left;
	width:269px;
	height:95px;
	text-indent:-9000px;
	overflow:hidden;
	background:none;
}
div#logo-titulo h1 a {
	width:269px;
	height:95px;
    display:block;
    background:url(../images/logo.png) no-repeat 10px 8px;
}

div#logo-titulo p {
	float:right;
	width:169px;
	height:95px;
}
/***    TITULO DAS PÁGINAS    ***/
div#logo-titulo p.index {
    background:url(../images/certificado-qualidade.png) no-repeat 0 15px;
}
/*---------------*/

/***    MENU PRINCIPAL    ***/
div#menu_drop {
	clear:both;
	width:778px;;
	height:28px;
	background:url(../images/cabecalho-menu-traco-transparencia.gif) repeat-x 0 0;
}

ul.menubar {
	display:inline;
	list-style: none;
}

ul.menubar li#submenu-desce {
	background:url(../images/cabecalho-submenu-seta.gif) no-repeat 70px 21px;
}

ul.menubar li.submenu{
	float:left;
	display:inline;
	height:28px;
}

ul.menubar li.submenu a:link, ul.menubar li.submenu a:visited{
	font-size:13px;
	font-weight:bold;
	color:#000;
	text-decoration:none;
	padding:7px 8px 8px 8px;
}

ul.menubar li.submenu a:hover, ul.menubar li.submenu a:active{
	color:#bc2724;
	background:#fff;
}

ul.menubar ul.menu{
	display: none;
	position: absolute;
}

ul.menubar a{
	display:block;
}

ul.menubar ul.menu, ul.menubar ul.menu ul{
	width: 175px;
}

ul.menubar ul.menu li{
	position: relative;
	list-style: none;
	height:25px;
	background:url(../images/menu-drop-fundo.png) repeat-y 0 0;
}

ul.menubar ul.menu li a:link, ul.menu li a:visited{
	font-size:13px;
	text-indent:23px;
	color: #000;
}
ul.menubar ul.menu li a:hover, ul.menu li a:active{
	background:url(../images/menu-drop-fundo-hover.png) no-repeat 0 0;
	color:#bc2724;
}

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li {
	float:left;
	padding:0;
	margin:0;
}
* html ul.menu li a {
	height:0;
	line-height:10px;
	background:url(../images/menu-drop-fundo.png) repeat-y 0 0;
}
/* End */


ul.menubar ul.menu li.submenu ul {display:none;} /* Hide sub-menus initially */

/*---------------*/

/***    MENU PRINCIPAL    ***/
#conteudo{
	clear:both;
	width:778px;
	height:555px;
	background:url(../images/index-fundo.jpg) no-repeat 0 0;
}
/*---------------*/

/***    RODAPÉ    ***/
#rodape{
	width:778px;
	height:22px;
	background:#952828;
}
/*---------------*/

menu.js (ao passar o mouse no menu que tem submenus, ele mantem a cor de fundo do hover)

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";}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.background = "#c2c1c1 url(images/cabecalho-submenu-seta.gif) no-repeat 70px 21px";}
         }
      }
   }

}

iepngfix - LINK

 

.htaccess (serve para funcionar o iepngfix - esta na pasta raiz junto com a index.htm)

AddType text/x-component .htc

 

iepngfix.htc(serve para funcionar o iepngfix - esta na pasta css junto com a estilo.css)

LINK

 

------------------------

 

 

 

É isso ae.. espero que alguem saiba resolver esse problema de nao funcionar

bg transparente ao declarar na folha de estilo css a tag a (img, div, ul, li, a {behavior:url("css/iepngfix.htc")}

 

 

 

Valewwwwww....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Fica bem interessante essa transparencia..

Só não entendi mesmo pq não ta pegando na tag a..

Vejam a prova de que a transparecia esta funcionando normal no restante..

 

 

http://www.preccisa.com.br/rei/empresa.htm

 

 

Bom, é isso ae.. to fazendo o restante das paginas pois inrroskei MESMO nesse menu..

Vou dar uma pesquisada melhor d noite.. mas se alguem me ajudar antes eu

vou agradecer muito rsrs..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

A transparência nos dois logos do topo também não funcionam.

Você colocou a imagem blank.gif na raiz do site?

Consulte: este link

 

 

Os logos tambem não ?

Você esta usando qual navegador ?

Aqui no ie6/8 e firefox esta funcionando normal :/

 

Vou dar uma olhada na pagina que voce me mandou e ver se consigo resolver..

Quanto a blank.gif eu coloquei ela na mesma pasta images e na pasta raiz..

pra nao ter como errar rsrs.. e msm assim nao tava dando certo..

 

 

Obrigado..

Vo voltar aqui só pra dizer que funcionou..

espero.. rsrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Estou impossibilitado de testar no Internet Explorer agora, mas me diz uma coisa, você já testou este script separado, só com o HTML? Pois ele funciona sim no Internet Explorer 6, aliás este é o seu objetivo.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Realmente não to entendendo o porque disso..

Pois na primeira linha do meu css eu to declarando para

quais tags eu vou querer que se aplique a transparencia, mas

no menu, a imagem de fundo png esta na tag <a hrf...></a>,

e quando eu a declaro no css, ele some com a imagem

img, div, ul, li, p, a {behavior:url("iepngfix.htc")}
mas quando eu não declaro, a imagem aparece, só que sem transparencia..

Estaria eu fazendo errado colocando a imagem de fundo em um link (a href~) ?

É que não consegui de outra forma para aparecer no IE6...

Esse link abaixo já veio junto com o menu que eu peguei (não lembro onde)

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li {
	float:left;
	padding:0;
	margin:0;
}
* html ul.menu li a {
	height:0;
	line-height:10px;
	background:url(../images/menu-drop-fundo.png) repeat-y 0 0;
}
/* End */

no mesmo css, que funciona no firefox..

ul.menubar ul.menu li{
	position: relative;
	list-style: none;
	height:25px;
	background:url(../images/menu-drop-fundo.png) repeat-y 0 0;
}

ul.menubar ul.menu li a:link, ul.menubar ul.menu li a:visited{
	font-size:13px;
	text-indent:23px;
	color: #000;
}
ul.menubar ul.menu li a:hover, ul.menubar ul.menu li a:active{
	background:url(../images/menu-drop-fundo-hover.png) no-repeat 0 0;
	color:#bc2724;
}

menu-drop-fundo.png

Imagem Postada

 

menu-drop-fundo-hover.png

Imagem Postada

 

É que eu não manjo de javascript.. sera que em algum lugar do js ele

define para quais tags ele permitira a trasnparencia ? e la nao esteja a tag a?

 

Ou não eh semântico colocar background em link (<a href="" style="background:url(imagem-qualquer.png) no-repeat 0 0;">Semântico?</a>) ??

Apesar de que, quem não trabalha muito com semântica eh o ie6, que só causa problema..

 

Bom, vou tentando aqui pra ver oq da, mas ta complicado..

 

Valewss..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Preciso de uns cursos.. rsrs

Quem puder me indicar alguns :D

Vou começar com akeles da Treinaweb..

Não sei qual faculdade começar, portanto vou mergulhar nos cursos esse ano que

esta a chegar..

 

Vou tentar ficar bom em css, php e flash.. os que eu mais me interesso..

 

ahh.. e javascript tb mt interessante..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

sim sim.. eu havia declarado tudo

 

DD_belatedPNG.fix('#blabla');

Só que ele dava uma piscada ao passar o mouse por cima dos submenus..

Se desse só uma piscada uma vez tudo bem, mas quando ia descendo o mouse

e passando sobre os menus ele nao piscava toda hora, era irritante..

Naquele caso, ja que funcionava, mas piscando, vou tentar novamente,

pois fiz umas alterações no css.. ai eu posto aqui se deu certo ou nao..

o vida heim.. esse ie6 acaba com a felicidade dos outros..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Nop..

 

To usando um bg para li

ul.menubar ul.menu li{
	position: relative;
	list-style: none;
	height:25px;
	background:url(http://www.preccisa.com.br/rei/images/menu-drop-fundo.png) repeat-y 0 0;
}
ul.menubar ul.menu li a:hover, ul.menubar ul.menu li a:active{
	background:url(http://www.preccisa.com.br/rei/images/menu-drop-fundo-hover.png) no-repeat 0 0;
	color:#bc2724;
}

mas para o ie só aparece configurado corretamente usando isso

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li {
	float:left;
	padding:0;
	margin:0;
}
* html ul.menu li a {
	height:0;
	line-height:10px;
	background:url(../images/menu-drop-fundo.png) repeat-y 0 0;
}
/* End */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Coloquei separadamente no arquivo .rar os 2 menus,

um com iepngfix e o outro com DD_belatedPNG (DD_belatedPNG eu não declarei

as class`s e id`s que devem ser aplicada a transparencia pois estava dando uma travada,

devo ter declarado errado achoo.. mas antes de travar, ainda continuava a piscada, mas por

garantia tirei.. basta dar uma olhada onde tem png e declarar

(ul.menu li.linha // ul.menubar ul.menu li a.link:hover, ul.menubar ul.menu li a.link:active // * html ul.menu li.linha a.link)

Eu nao consegui declarar dessa vez rsrs.. nao sei oq houve..

 

 

Link para download do MENU.rar

 

 

Da uma ajudinha ai Thiago rsrs..

To bravo ja com esse menu que nao funciona corretamente..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

ie6 somente..

Creio eu, pois eu uso Chrome, ie6 e Firefox sempre atualizado para testar minhas páginas..

 

:/

 

Mas eu dei uma olhada no link que você me passou, vou tentar aplicar CSS Sprites a esse

menu sem vergonha. rsrs

 

Valew..

Volto aqui jaja..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Já peguei o código meio desorganizado (nao to reclamando, afinal com ele foi o começo),

ai eu fui mexendo, nao foi funcionando, acabei meio que me perdendo.. mas vou tentar..

Mas o problema nem é com as imagens na verdade, pois em outros navegadores, eu passo o mouse

e ele se comporta normal, com transparencia.. agora no ie6 ele chega a aparecer a imagem mas não

aplica a ela, a transparencia..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

Então..

Com DD_belatedPNG eu consigo transparencia, porem ele da essa piscada chata..

Ja com iepngfix a piscada não existe, mas a transparencia tambem nao..

Ao aplicar transparencia tambem a tag a ele some com a imagem..

img, div, ul, li, p, a {behavior:url("iepngfix.htc")}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

É acho que eu tava te confundindo rsrs..

Mas essa minha ultima explicação ficou correta..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fabio Jp    0

Fabio Jp
Postado

IEPNGFIX - Aqui eu apliquei a tag a para receber transparencia

Imagem Postada

 

 

 

 

 

IEPNGFIX - Aqui eu nao declaro a tag a para receber transparencia, sendo assim, a imagem nao aparece com transparencia..

Imagem Postada

 

 

 

 

 

DD_belatedPNG - Aqui a transparencia funciona mas da aquela piscada que eu falei..

Imagem Postada

 

 

 

 

 

 

Ahhh e agora que outra pessoa postou em outro topico, achei onde eu peguei o codigo para

esse meu meunu..

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