Capas Div Tapan Controles Capas Inferiores

[wendo_evm]

Hola chicos!

Tengo un pequeño problema de compatibilidades con las Div. He mirado por el foro pero no encuentro nada que me sirva de ayuda. El tema es el siguiente:

He estructurado varias capas Div que se montan las unas a las otras. No se montan en su totalidad, solo tapan pequeñas partes de las Div inferiores. Es decir, que los posibles controles como los de un video de youtube, o unos botones de flash, todo y estar en una Div inferior, dicho control no es tapado por el Div superior.

Todo debería funcionar, pero resulta que solo funciona en IE, en el resto de navegadores es como si un div superior, aunque el tamaño esté restringido, tapa todo lo que hay detrás.

Este es el css que he utilizado:

Código CSS:

<style type="text/css">
<!--
body {
    background-image: url(Fondo_HTML.jpg);
    border:0px;
}
.texto {
    position:absolute;
    top:40px;
    left:70px;
    font-family:Verdana;
    font-size:7pt;
    color:#fff;
}
.frontal {
    position:absolute;
    left:50%;
    top:50%;
    width:962px;
    margin-left:-510px;
    height:600px;
    margin-top:-300px;
}
.logo {
    position:absolute;
    left:50%;
    top:50%;
    height:150px;
    margin-top:-45px;
    width:150px;
    margin-left:-500px;
 }
.carrusel {
    position:absolute;
    left:50%;
    top:50%;
    height:400px;
    margin-top:-20px;
    width:900px;
    margin-left:-450px;
 }
.video {
    position:absolute;
    left:50%;
    top:50%;
    height:266px;
    margin-top:-210px;
    width:473px;
    margin-left:-25px;
    padding:5px;
    background-color:#000;  
 }
-->
</style>
 

Este es el HTML de la colocación de los Div:

Código HTML:

<!-- CONTENEDOR -->
<div>
<!-- CAPA VIDEO POSICIÓN 0 - (FONDO) -->
<div class="video">
<iframe width="473" height="266" src="http://www.youtube.com/embed/z1DD1pQmXP0?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</div>
<!-- CAPA FLASH (CARRUSEL) - POSICIÓN 1 -->
<div class="carrusel">
<script language="JavaScript" type="text/javascript">
    AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width', '900','height', '400','src', 'Carrusel','quality', 'high','pluginspage','http://www.adobe.com/go/getflashplayer_es','align', 'middle','play', 'true','loop', 'true','scale', 'showall','wmode', 'window','devicefont', 'false','id', 'Carrusel','bgcolor', '#333333','name', 'Carrusel','menu', 'true','allowFullScreen', 'false','allowScriptAccess','sameDomain','movie', 'Carrusel','wmode','transparent','salign', ''); //end AC code
</script>
<noscript>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="400" id="Carrusel" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="wmode" value="transparent"
    <param name="movie" value="Carrusel.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#333333" />    <embed src="Carrusel.swf" quality="high" bgcolor="#333333" width="900" height="400" name="Carrusel" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_es" />
    </object>
</noscript>
</div>
<!-- CAPA IMÁGEN (LOGO IMCTOYS) - POSICIÓN 2 -->
<div class="logo">
<img src="IMC_logo_2010.png" alt="IMC Toys" width="150" height="150" border="0">
</div>
<!-- CAPA IMÁGEN (COHE Y LOGO CARS 2) ESTÁ RECORTADO EN 3 PARTES PARA QUE NO "TAPEN" LOS CONTROLES DEL VIDEO DE YOUTUBE - POSICIÓN 3 -->
<div class="frontal">
    <div class="texto">CARS TM & ©. All Rights Reserved.</div>
    <div style="width:481px; height:371px; position:absolute; top:0px; left:0px"><img src="Marco_01.png" width="481" height="371"></div>
    <div style="width:127px; height:255px; position:absolute; top:0px; left:481px"><img src="Marco_02.png" width="127" height="255"></div>
    <div style="width:354px; height:130px; position:absolute; top:0px; left:608px"><img src="Marco_03.png" width="354" height="130"></div>
</div>
<!-- CAPA IMÁGEN (IMAGEN TRANSPARENTE) COMO IMÁGEN COCHE TAPA LOGO, HE COLOCADO DIV CON IMÁGEN TRANSPARENTE PARA PODER HACER UN LINK - POSICIÓN 4 -->
<div class="logo">
  <a href="http://www.imctoys.com" target="_blank"><img src="Transparente.png" alt="IMC Toys" width="150" height="150" border="0"></a>
</div>
 
</div>
 

Y este es el link para que podáis testearlo en IE9 y FF4 para que me entendáis mejor:

[URL="http://http://www.imctoys.com/Promo/Cars2/"]http://www.imctoys.com/Promo/Cars2/[/URL]

Muchas gracias por todo de antemano.

[yonaida]

utiliza la propiedad z-index para los divs, mientras mayor sea el index, mas delante se vera la capa.

z-index: 1;
z-index: 15; (esta se vera delante de la otra)

salu2

[wendo_evm]

Hola Yonaida, gracias por contestar

El tema es que antes lo tenía con la propiedad Z-index, pero como se colocan en su posición correcta sin necesidad de utilizar dicha propiedad, pos simplemente la deseché.

Igualmente lo volveré a probar, haber si de esa manera se soluciona el problema.

¿Has podido testear el link en IE9 y FF4?

En cuanto coloque el tema de los Z-index y testee comento el resultado.

Hasta pronto!!

[wendo_evm]

Bueno, pues ya he colocado la propiedad z-index, las capas están colocadas perfectamente pero sigo con el mismo problema, en IE9 funciona todo perfectamente y en FF4 las capas inferiores quedan inutilizadas.

Ya no sé si el tema es que falla en el resto de navegadores, o lo que para mí funciona ok es un error de IE9...

Esto de la compatibilidad entre navegadores me está volviendo majara!!!!

[wendo_evm]

Problema Solucionado:

La Div superior era contenedor de otras 3 Divs con una imagen cada una de diferentes tamaños.
Estas 3 Divs no se solapaban con los controles de los contenidos de las Divs inferiores, pero la superficie del Div que hacía de contenedor sí que se solapaba.

El tema es que mientras que IE9 ignora las áreas bacías (sin contenidos) de las Div, el resto de navegadores detecta una Div como un objeto en sí misma, por lo que el contenido que se encuentra en Divs inferiores queda inutilizado.

IE tiene cosas malas, pero en este tema le da un repasito a los demás.

Gracias a todos!!!!

Saludos!!!!

[yonaida]

majara!!!!!! bienvenido al club hahahaah este es el tipico problema de la gran mayoria.

no se a que te refieres cuando dices que en firefox las capas inferiores quedan inutilizadas.
he probado en varios navegadores, ahi te dejo screenshots de lo que veo yo, a simple vista funciona igual en todos. no tengo posibilidad de mirar en ie9 ahora.

si dejaras un screenshot estaria bien.

Crome 11 : http://imageshack.us/photo/my-images/96/chrome11.png/
FF 4.1 : http://imageshack.us/photo/my-images/202/ff41.png/
safari : http://imageshack.us/photo/my-images/819/safarig.png/
opera 11.10 : http://imageshack.us/photo/my-images/814/opera1110.png/

aqui te dejo este enlace que nos recomiendand varias webs y aplicaciones para testear webs.
http://www.elwebmaster.com/articulos...en-navegadores

[yonaida]

umm veo que llegue tarde con el post hahahaaha bueno, a veces los problemas mas simples tienen soluciones complejas o viceversa. lo de los navegadores es de caerse de pie.

yo doy gracias a que existe firebug para ir mirando la estructura de las paginas y el diseño que pilla cada cosa, sino es que es imposible.

weno suerte con eso. salu2

[wendo_evm]

Muchas gracias por la aportación!! Aunque justo ayer por la mañana lo pude solucionar.

Suerte a ti también!!! Hasta la próxima!!!!

[ciberwolf18]

Iniciado por wendo_evm

Muchas gracias por la aportación!! Aunque justo ayer por la mañana lo pude solucionar.

Suerte a ti también!!! Hasta la próxima!!!!

Por favor comparte la solucion...