overlapping desactiva capa inferior en FF y Safari

ezeslafer · #1 (**permalink**) 18/09/2009, 13:51

Hola, tengo dos capas superpuestas, las dos en position: absolut.
Dentro del espacio superpuesto no se puede acceder a la funcionalidad de la capa que esta por debajo (links, text imput, etc...), aunque se visualiza perfectamente.
Esto sucede en FireFox y en Safari. En IE funciona perfectamente.

Bueno, espero que puedan ayudarme.
Se agradece de antemano. Ezequiel.

alexk · #2 (**permalink**) 18/09/2009, 16:01

mmmm... podrias poner codigo (html/css) o un ejemplo en linea para ver que pasa... ya que mi Firebug mental anda lento... la cuestion es quien esta arriba de quien y porque... hay algun "position:relative"???? nose pon mas info + codigo chao!...

ezeslafer · #3 (**permalink**) 18/09/2009, 16:46

Bueno, este es mas o menos el código

el HTML:

<script language="javascript" src="precio/chainedselects.js" type="text/javascript"></script>
<script language="javascript" src="precio/config.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function initCS() {
var form = document.forms[0];
initListGroup("platino_colch", form.medida01, form.tipo01, form.precio01);
}
</script>

<body onload="initCS()">

<div class="precios">
<form>
<table width="985" border="0" cellspacing="0" cellpadding="0" class="style01" align="center">
<tr>
<td width="244" align="right">Colchón solo<br /><select name="medida01" class="style01f" style="width:90px;"></select><select name="tipo01" class="style01f" style="width:70px;"></select><select name="precio01" class="style01f" style="width:70px;"></select><br />Colchón y Sommier<br /><select name="medida01a" class="style01f" style="width:90px;"></select><select name="tipo01a" class="style01f" style="width:70px;"></select><select name="precio01a" class="style01f" style="width:70px;"></select></td>
<td width="15"> </td>
<td width="243"> </td>
<td width="15"> </td>
<td width="243"> </td>
<td width="15"> </td>
<td width="210"> </td>
</tr>
</table>
</form>
</div>

<div class="contenido">

<table width="985" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="244" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left" valign="top"><a href="img/art/cannon/detalles_platino.jpg" rel="facebox"><img src="img/logo_cannon.png" alt="Cannon" width="80" height="42" border="0" /><img src="img/portadas/txt_platino.gif" alt="soñar cannon" width="142" height="38" border="0" /></a></td>
</tr>

<tr>
<td><a href="img/art/cannon/detalles_platino.jpg" rel="facebox"><img src="img/portadas/platino.png" alt="platino" width="134" height="94" border="0" /></a></td>
<td align="left" valign="top" class="style02d"><br />Resortes - 1 Plaza<br /><strong>Colchón y Sommier</strong><span class="style01"><a href="img/art/cannon/detalles_platino.jpg" rel="facebox"><br />
(+ info.)</a></span></td>
</tr>

<tr>
<td colspan="2"><br /><br /><br /><br /><br /></td>
</tr>
</table>...

</table>
</div>

</body>
</html>

... y el CSS:

@charset "utf-8";
/* CSS Document */

.contenido{
position:absolute;
width: 100%;
text-align: center;
top: 320px;
left: 0px;
}

.precios{
position:absolute;
left:0px;
top:450px;
width:100%;
text-align:center;
}

...hasta luego. Gracias.

ezeslafer · #4 (**permalink**) 18/09/2009, 16:49

Ah, cualquiera de los dos div queda desactivado cuando queda devado

kseso? · #5 (**permalink**) 18/09/2009, 19:01

Porque los dos tienen una anchura de 100% ¿de qué? no me he parado a ver.
La altura supongo que la del superior será igual o mayor que la del inferior.

Para ver hasta donde llega cada uno, ponle bordes.

ezeslafer · #6 (**permalink**) 21/09/2009, 10:00

Gracias, igualmente ya se hasta donde llega cada uno. Y ya comprobé que es solo la superficie en superposición la que queda desactivada...

ezeslafer · #7 (**permalink**) 23/09/2009, 20:35

Gente, alguna pista...? Les dejo la direccion de la página, por ahí...
colchoneriayaer.com.ar
Saludos

alexk · #8 (**permalink**) 23/09/2009, 21:08

primero a la "table" dentro de tu "texto_inst" no le veo el sentido por que usar una tabla pero bueno quitale el "width" luego en el primer "tr" de esa "table" elimina todo "td" que nosea el que lleva el texto... y como tienes todo el sitio flotando en sin alma deja tu .texto_inst asi:

Código:

.texto_inst {
left:50%;
margin-left:295px;
position:absolute;
text-align:center;
top:400px;
width:180px;
}

y ya chao y suerte

CONSEJO: Tienes muuuuchos divs y muuuuchas tablas o usas divs o tablas... y no abuses de la posicion absoluta... es todo... chao y bonita web.

edito: perdon me fui a lo tecnico y no a lo obvio al div que contiene dichos precios ponle un z-index y ya, esta debajo de <div class="pie">

<div style="position: absolute; left: 0px; top: 450px; width: 100%; text-align: center; z-index: 999;">