Problemas com Z-Index (IE)

ScornInPC · Agosto 14, 2009

Pessoal, tentei de varios jeitos, varios artigos, mas nada me resolveu o problema.

Tenho isso ó

<div class="dropdownmenu" onMouseOver="seeMenu('menucontent1', 'block')" onMouseOut="unseeMenu('menucontent1')">

	     

	<div class="content" id="menucontent1">
		MEU MENUZINHO
	</div>
</div>

e Isso

.dropdownmenu {
	text-decoration:	none;
	position:			relative;
	background:			transparent url(imagens/arrowdrop.png) center top no-repeat;
	display:			inline;
}

.dropdownmenu .content {
	border:				3px solid #EAB693;
	visibility:			hidden;
	position:			absolute;
	left: 				-37px !important;
	top:				14px !important;
	left: 				-50px;
	top:				19px;
	z-index:			10;
}

Acontece isso no FF

Mas no IE, a flechinha fica por cima.

Alguem tem alguma idéia do que pode ser feito?

Valeu

Thiago Retondar · Agosto 14, 2009

Poste o link para melhor ajuda-lo. ;)

ScornInPC · Agosto 14, 2009

Putz, o link não vai dar não, ta local só, e se eu atualizar la agora vai zuar tudo. Vou tentar simular em um arquivo a parte. Ja posto!

Thiago Retondar · Agosto 14, 2009

Se quiser pode postar o HTML gerado e CSS e hospeda-los. =D

ScornInPC · Agosto 14, 2009

Rapaz, se eu fizesse isso, ia acabar com sua tarde uauhae não são tão judas assim xD

Bom, ficou simplinho, mas retratou bem o problema.

http://added.tempsite.ws/testecss.html

No FF fica jóia, mas no IE zoa.

Passe o mouse em cima da flexinha.

Valeu a atenção ;)

Thiago Retondar · Agosto 14, 2009

Estranho... Estou sem tempo agora para analisar em detalhes, mas tente usar display:none&block ao invés de visibilty.

ScornInPC · Agosto 14, 2009

Ola Thiago, tranquilo.

Então, ja tentei tambem, tentei até outros tipos, como table e tal.

Nada =(

Andei lendo que isso é um bug do IE mesmo, não controlar z-index de position:relative. Mas tem como contornar colocando outros elementos como relative, mas não dei conta não =/

Thiago Retondar · Agosto 14, 2009

Estou sem Internet Explorer aqui, mas tenta colocar assim nessa última td » <td style="z-index: 1;">.

ScornInPC · Agosto 14, 2009

Mesma coisa =(

Quer que eu tire ou deixe?

Gui.BAR · Agosto 14, 2009

Cara, tem uns lances no IE6 que não dá pra entender. Acho que nele, pra funcionar o z-index, o elemento pai e os filhos que você quer tem que ter o z-index setados.

Tenta aí e me diz o que deu. To baixando o IETester (to sem IE tbm! :blink: )

ScornInPC · Agosto 14, 2009

To na pós agora =/ (suca)

Mas mesmo não sendo IE 6 (ja chegamos a conclusão em nem homologar mais IE 6) vou testar isso, o duro é que tem pai pra caramba, será que se eu jogar um

.content * { z-index: 1; }

firma?

Thiago Retondar · Agosto 15, 2009

Consegui.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	
		<style>
			.dropdownmenu {
				text-decoration:	none;
				background:			transparent url(arrowdrop.png) center top no-repeat;
				display:			inline;
			}

			.dropdownmenu .content {
				border:				3px solid #EAB693;
				visibility:			hidden;
				position:			absolute;
				margin: 5px -25px;
			}
		</style>
		
		<script>
			function seeMenu(id, mode) {
				document.getElementById(id).style.display = mode;
				document.getElementById(id).style.visibility= 'visible';
			}

			function unseeMenu(id) {
				document.getElementById(id).style.display = 'none';
				document.getElementById(id).style.visibility= 'visible';
			}
		</script>
	</head><body>
		<table border="1" width="999">
			<tbody><tr>
				<td>linha 1</td>
				<td>linha 1</td>
				<td>linha 1</td>
				<td>
					<img src="testecss_arquivos/editar.gif" title="Editar" border="0">
					<div class="dropdownmenu" onmouseover="seeMenu('menucontent1', 'block')" onmouseout="unseeMenu('menucontent1')">
						     
						<div style="background-color: rgb(255, 255, 255); display: none;" class="content" id="menucontent1">
							Menu 1 <br> Menu 2 <br> Menu 3
						</div>
					</div>
				</td>
			</tr>
			
			<tr>
				<td>linha 2</td>
				<td>linha 2</td>
				<td>linha 2</td>
				<td style="z-index: 1;">
					<img src="testecss_arquivos/editar.gif" title="Editar" border="0">
					<div class="dropdownmenu" onmouseover="seeMenu('menucontent2', 'block')" onmouseout="unseeMenu('menucontent2')">
						     
						<div style="background-color: rgb(255, 255, 255); display: none; z-index: 10" class="content" id="menucontent2">
							Menu 1 <br> Menu 2 <br> Menu 3
						</div>
					</div>
				</td>
			</tr>
			
			
			<tr>
				<td>linha 3</td>
				<td>linha 3</td>
				<td>linha 3</td>
				<td style="z-index: 1;">
					<img src="testecss_arquivos/editar.gif" title="Editar" border="0">
					<div class="dropdownmenu" onmouseover="seeMenu('menucontent3', 'block')" onmouseout="unseeMenu('menucontent3')">
						     
						<div style="background-color: rgb(255, 255, 255); display: none; visibility: visible;" class="content" id="menucontent3">
							Menu 1 <br> Menu 2 <br> Menu 3
						</div>
					</div>
				</td>
			</tr>
			
			
			<tr>
				<td>linha 4</td>
				<td>linha 4</td>
				<td>linha 4</td>
				<td style="z-index: 1;">
					<img src="testecss_arquivos/editar.gif" title="Editar" border="0">
					<div class="dropdownmenu" onmouseover="seeMenu('menucontent4', 'block')" onmouseout="unseeMenu('menucontent4')">
						     
						<div style="background-color: rgb(255, 255, 255); display: none; visibility: visible;" class="content" id="menucontent4">
							Menu 1 <br> Menu 2 <br> Menu 3
						</div>
					</div>
				</td>
			</tr>
			
			
			<tr>
				<td>linha 5</td>
				<td>linha 5</td>
				<td>linha 5</td>
				<td style="z-index: 1;">
					<img src="testecss_arquivos/editar.gif" title="Editar" border="0">
					<div class="dropdownmenu" onmouseover="seeMenu('menucontent5', 'block')" onmouseout="unseeMenu('menucontent5')">
						     
						<div style="background-color: rgb(255, 255, 255);" class="content" id="menucontent5">
							Menu 1 <br> Menu 2 <br> Menu 3
						</div>
					</div>
				</td>
			</tr>
		</tbody></table>
	</body></html>

Estranho que nunca havia tido problemas com z-index no Internet Explorer 6. :mellow:

ScornInPC · Agosto 15, 2009

Poxa, então, o problema era no IE 7.

Copiei seu código la, e continua ainda =/

não vi mudança no seu código, o que você fez la?

Thiago Retondar · Agosto 15, 2009

Aqui funcionou.

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://thiagotestes.site90.com/iMasters/testecss.html

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

ScornInPC · Agosto 15, 2009

aehuaheuahe alguma coisa tem ai no seu de diferente, tem como você deixar até a noite pra quando eu chegar em casa eu dar uma olhada?

auehuahe massa, era isso mesmo que eu queria xD

Thiago Retondar · Agosto 15, 2009

Deixo no ar sim. No problems. =)

ScornInPC · Agosto 17, 2009

Thiago, sinto muito, mas não consigo fazer o que você fez.

Para mim você só colocou o z-index: 1 no TD e o z-index: 10 no div. Porem repare que na primeira e na segunda linha voce não fez isso, e mesmo assim não aparece. Não entendi de verdade, sabe me dizer o que voce fez?

Thiago Retondar · Agosto 17, 2009

Mas está funcionando? Agora estou sem poder usar Internet Explorer. =/

Acho que do jeito que fiz, se deixar sem nenhum z-index funciona. ;)

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

ScornInPC · Agosto 17, 2009

Então Thiago, o seu funciona sim, ta certinho, mas eu não sei o que você fez, esse é o detalhe. Aparentemente o que voce fez foi colocar os z-index em cada TD e nos DIVs, se eu tirar isso volta a ser o que era o meu. Mas eu colocando isso no meu, tb não funciona. Gostaria de saber se você fez algo a mais do que colocar estes z-index, que talvez tenha passado perante meus olho.

Valeua ajuda, de verdade xD

Thiago Retondar · Agosto 17, 2009

Veja o que eu mudei no CSS.

Você pode tirar esse z-index:10

<div style="background-color: rgb(255, 255, 255); display: none; z-index: 10" class="content" id="menucontent2">
							Menu 1 <br> Menu 2 <br> Menu 3
						</div>

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

Arquivado

Problemas com Z-Index (IE)

Recommended Posts

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gui.BAR 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

ScornInPC 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18