Sobreposição desordenada

[DinhoPHP 1]

Olá!

Serei breve por estar com muito sono.

Tenho essa página onde criei um álbum de fotos no estilo Lightbox

 

http://assembleiadedeusdarenovacao.com/dep_home_joias_de_cristo.php

 

só que no Chrome ela está toda desorganizada e o oposto acontece no Internet Explore. Tentei várias coisas e nada! Favor, conto e já agradeço a ajuda de vocês.

[Maykel-ctba 233]

Coloque seu lightbox com um z-index maior do que o restante do site! ;-)

[DinhoPHP 1]

Maykel, ótima resposta! A qual darei uma revisada novamente porque já havia feito, ou seja, pensado no z-index. Segue o código do trecho responsável, e é claro que marcarei como resolvido para dar aquela força! :) Obrigado!

 

HTML5

 

<article id="joias_de_cristo">

<h4>Registros Fotográficos</h4>

<a href = "javascript:void(0)" onclick = "document.getElementById('quadrado_foto').style.display='block';document.getElementById('efeito_preto').style.display='block'">

<?php

for($c = 1; $c <=1; $c++){

echo "<img id='reg_joias_de_cristo' src='imagens/amostra/departamentos/joias_de_cristo/amostra$c.jpg' alt='' title='Clique para visualizar a galeria deste trabalho'/>";

}

?></a>

<br />

<iframe id="quadrado_foto" src="slide_festividades_2014/fest_joias_de_cristo_2014.html" width="100%" height="100%" marginheight="0" marginwidth="0" style="max-width:100%;overflow:hidden;padding:0;margin:0 auto;">

<a href = "javascript:void(0)" onclick = "document.getElementById('quadrado_foto').style.display='none';document.getElementById('efeito_preto').style.display='none'"></a>.</iframe>

<a href = "javascript:void(0)" onclick = "document.getElementById('quadrado_foto').style.display='none';document.getElementById('efeito_preto').style.display='none'" onmouseover="javascript:toTop();"><div id="efeito_preto"></div></a>

</article>

CSS3

/*LIGHT BOX*/

#efeito_preto{

display: none;

position: fixed;

top: 0%;

left: 0%;

width: 100%;

height: 220%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

#quadrado_foto {

display: none;

position: fixed;

top: 4%;

left: 17%;

width: 67%;

height: 92%;

padding: 2px;

border:none;

z-index:1002;

overflow: auto;

}

Maykel, descobri o erro e era logo no início, a id da article no CSS3 ( <article id="joias_de_cristo"> ). Esta aplicava um opacity que se aplicava à alguns navegadores, como foi o caso do Chrome, não ocorrendo no IE porque não havia esta instrução para ele.

Mesmo, assim agradeço-te pela força. :thumbsup:

 

Fico com raiva de mim mesmo, me embolando com meus próprios códigos! kkkkkkk