Foros del Web » Creando para Internet » CSS »

overlapping desactiva capa inferior en FF y Safari

Estas en el tema de overlapping desactiva capa inferior en FF y Safari en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/09/2009, 14:51
 
Fecha de Ingreso: diciembre-2007
Mensajes: 8
Antigüedad: 10 años
Puntos: 0
overlapping desactiva capa inferior en FF y Safari

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.
  #2 (permalink)  
Antiguo 18/09/2009, 17:01
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: overlapping desactiva capa inferior en FF y Safari

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!...
  #3 (permalink)  
Antiguo 18/09/2009, 17:46
 
Fecha de Ingreso: diciembre-2007
Mensajes: 8
Antigüedad: 10 años
Puntos: 0
Respuesta: overlapping desactiva capa inferior en FF y Safari

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">&nbsp;</td>
<td width="243">&nbsp;</td>
<td width="15">&nbsp;</td>
<td width="243">&nbsp;</td>
<td width="15">&nbsp;</td>
<td width="210">&nbsp;</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.
  #4 (permalink)  
Antiguo 18/09/2009, 17:49
 
Fecha de Ingreso: diciembre-2007
Mensajes: 8
Antigüedad: 10 años
Puntos: 0
Respuesta: overlapping desactiva capa inferior en FF y Safari

Ah, cualquiera de los dos div queda desactivado cuando queda devado
  #5 (permalink)  
Antiguo 18/09/2009, 20:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: overlapping desactiva capa inferior en FF y Safari

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 21/09/2009, 11:00
 
Fecha de Ingreso: diciembre-2007
Mensajes: 8
Antigüedad: 10 años
Puntos: 0
Respuesta: overlapping desactiva capa inferior en FF y Safari

Gracias, igualmente ya se hasta donde llega cada uno. Y ya comprobé que es solo la superficie en superposición la que queda desactivada...
  #7 (permalink)  
Antiguo 23/09/2009, 21:35
 
Fecha de Ingreso: diciembre-2007
Mensajes: 8
Antigüedad: 10 años
Puntos: 0
Respuesta: overlapping desactiva capa inferior en FF y Safari

Gente, alguna pista...? Les dejo la direccion de la página, por ahí...
colchoneriayaer.com.ar
Saludos
  #8 (permalink)  
Antiguo 23/09/2009, 22:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: overlapping desactiva capa inferior en FF y Safari

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;">

Última edición por alexk; 23/09/2009 a las 22:12 Razón: ups que tonto jeje...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:46.