[Resolvido] Problema com z-index no IE

[Matheus Rennê 0]

Tenho um menu com submenus, mas no IE, o submenu fica embaixo dos objetos.

 

No menu em azul, somente no link Institucional, há um submenu.

No FF funciona sem problemas, agora no IE, tanto 6 como 7, o submenu aparece, mas fica embaixo do conteúdo.

Acho que o problema é o z-index, mas não consegui resolver.

 

Link pro site aqui.

[programador php 0]

#col-menus ul#menu_acib li:hover ul, #col-menus ul#menu_acib li.over ul {
	 display:block;
	 position: relative;
	 z-index: 9999;
}

 

não testei mas acho que funciona!

 

abraço

[Matheus Rennê 0]

programador php, tentei o que disse e não funcionou.

[programador php 0]

e se colocar absolute?

 

 

abraço

[Matheus Rennê 0]

Nada ainda. =/

[brcontainer 16]

descobri o motivo é isso:

img { behavior: url(css/iepngfix.htc); }

tente fazer isso:

img { behavior: url(css/iepngfix.htc); position:relative;}

e tambem ponha relative no menu, a defina z-index em ambas e estará resolvido

o Menu e as imagens PNG.

 

se acaso não der tente definir absolute no menu e relative no seletor IMG ae defina z-index:; e ambas ;)

[Matheus Rennê 0]

Silverfox,

 

Não entendi muito bem o que quis dizer, mas coloquei position: relative no elemento IMG

 

img { behavior: url(css/iepngfix.htc); position: relative;}

e também no menu.

 

#col-menus ul#menu_acib, #col-menus ul#menu_btos, #col-menus ul#menu_invista {
	position: relative;
...

Funcionou apenas no IE7. No 6 continua do mesmo jeito e ao colocar relative no menu, os links que por ora estavam ativos são desativados, ou seja, sem link.

 

Link pro site

[brcontainer 16]

bem é que você está usando uma script: css/iepngfix.htc, para que funcione imagens PNG no IE6, o problema é que elas se sobrepõe a tudo. Porque a script usa "outerHTML" que envia e usa uma imagem que acaba ficando por cima, mesmo aplicando z-index somente não irá funcionar. Então deve-se aplicar z-index nos elementos que possuirem o BEHAVIOR faça algo assim:

img { behavior: url(css/iepngfix.htc); position:relative; z-index:5;}

e assim:

#col-menus ul#menu_acib, #col-menus ul#menu_btos, #col-menus ul#menu_invista {
	position: relative;
	z-index:2;
...

e:

.box_tn end_box{
	position: relative;
	z-index:2;
}

[Matheus Rennê 0]

Fiz como dito. Porém no IE7 o menu passou a ficar atrás da imagem. Então diminui o z-index dos elementos que possuem BEHAVIOR e aumentei dos elementos que contém o menu.

beleza, o menu voltou a ficar por cima. Mas no IE6 nada acontece.

 

Veja essa imagem. Há um pedaço onde o link fica ativo.

 

[brcontainer 16]

use então condicionais ou HACK's:

http://forum.imasters.com.br/index.php?showtopic=247738

http://forum.imasters.com.br/index.php?showtopic=245609

 

é mais um motivo pro pessoal sentar o pau no ie =/

[Aprendiz CSS 3]

sugiro trocar isso:

img { behavior: url(css/iepngfix.htc); position: relative;}

por isso

 

body { behavior: url(css/iepngfix.htc); }

 

abraço

[brcontainer 16]

Aprendiz não fará diferença, por que a imagens no IE são geradas novemente, nesse caso ele o elemento cria um elemento IMG junto ao seletor tipo: IMG

 

o problema ocorre por que ele acaba ficando por cima, talvez por causa do outerHTML(javascript).

Acredito que se ele tentar usar isso ajude:

http://forum.imasters.com.br/index.php?showtopic=223512

[Matheus Rennê 0]

Pessoal, acho que o problema não se trata da imagem PNG.

Confira o site agora.

 

No lugar da imagem PNG, coloquei uma JPG só para testar. Mas o menu continua abaixo.

 

Outro fato que reparei também é que aquela borda no final é renderizada pelo CSS no elemento DIV que aloca aquele conteúdo. Ou seja, o menu deveria estar por cima dessa borda.

 

Mas o que não entendo é que onde esse conteúdo é renderizado o CSS tá assim:

 

.box_tn {
	position: relative;
	z-index: -1000;
...

e submenu está assim:

 

#col-menus ul#menu_acib li ul {
	display: none;
	position: absolute;
	z-index: 2000;
...

Olha só os z-index. Não entendo pq fica abaixo.

 

Só completando, tentei as soluções acima postadas, mas não obtive sucesso.

[Aprendiz CSS 3]

Quer uma dica sincera!

 

Reescreva o Menu, fica mais facil, por ser um código pequeno!

 

abraço

[brcontainer 16]

amigo você não entendeu, se você usar JPG nao precisa do Z-INDEX e nem de relative.

Porem é um problema com o SCRIPT para rodar PNG.

A falha não ocorre no FF por que ele não usa a script.

 

Recomendo usar então JPG e não usar POSITION:; e nem Z-INDEX:;

só use no menu(se necessario)

[Matheus Rennê 0]

Amigos, consegui... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Bastou colocar um z-index nessa parte do código e funcionou...

 

#col-menus ul#menu_acib li, #col-menus ul#menu_btos li, #col-menus ul#menu_invista li {
	position: relative;
	z-index: 10;
...

Valeu pela ajuda de vcs...

[brcontainer 16]

que bom que conseguiu amigo falow abraços

[badcom 0]

desde quando z-index funfa com position:relative; ?

[brcontainer 16]

desde quando z-index funfa com position:relative; ?

Que eu testei funcionou, dependendo de outros objetos.

 

Tipo esse exemplo:

<style>
div#teste-1, div#teste-2{
background:#fc0;
width:200px;
height:200px;
position:absolute;
z-index:4;
}
div#teste-2{
position:relative;
background:#f00;
z-index:3;
margin: 6px 0 0 6px;
}
</style>

<div id="teste-1"></div>
<div id="teste-2"></div>

copie e cole depois troque o z-index:3; de div#teste-2 por z-index:5;, observe div#teste-2 possui RELATIVE.