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.