Foros del Web » Creando para Internet » CSS »

Capas que cambian de posición en Firefox

Estas en el tema de Capas que cambian de posición en Firefox en el foro de CSS en Foros del Web. Hola Tengo en una celda estas capas. En Internet Explorer las veo posicionadas correctamente pero si veo la Web con Firefox las capas aparecen en ...
  #1 (permalink)  
Antiguo 14/07/2006, 03:16
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Capas que cambian de posición en Firefox

Hola Tengo en una celda estas capas. En Internet Explorer las veo posicionadas correctamente pero si veo la Web con Firefox las capas aparecen en otra posición a la que se ven en Internet Explorer.

¿Cómo puedo evitar esto y que se vean en Firefox igual que en Internet Explorer?

Este es el código de las capas:

<th height="237" scope="row">

<div style="position:relative">

<div id="capa5" style="position:absolute;width:100; height:74px;top:70px;left:-110px;visibility:visible;z-index:1"><img src="images/frase_1.gif" width="232" height="71" /></div>
<div id="capa1" style="position:absolute;width:100;height:100;top: 20px;left:-130px;visibility:hidden;z-index:1"><img src="images/frase_2.gif" width="294" height="170" /></div>
<div id="capa2" style="position:absolute;width:100;height:100;top: 0px;left:-140px;visibility:hidden;z-index:1"><img src="images/frase_3.gif" width="294" height="264" /></div>
<div id="capa3" style="position:absolute;width:100;height:100;top: 20px;left:-130px;visibility:hidden;z-index:1"><img src="images/frase_4.gif" width="294" height="170" /></div>
<div id="capa4" style="position:absolute;width:100;height:100;top: 40px;left:-130px;visibility:hidden;z-index:1"><img src="images/frase_5.gif" width="294" height="125" /></div>

</div>
</th>
  #2 (permalink)  
Antiguo 14/07/2006, 03:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

En mozilla es obligatorio poner ls medidas:

Veo que defines height/width como atributo y como estilo... Te recomiendo que uses solo los estilos.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 14/07/2006, 06:10
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
¿Lo asigno como estile, como atributo quete refieres al tamaño de de las imagenes?
  #4 (permalink)  
Antiguo 18/07/2006, 03:40
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
No he conseguido que se vean las capas en el mismo sitio que en IE.

¿Podeís ponerme un ejemplo de cómo se haría?

Gracias
  #5 (permalink)  
Antiguo 19/07/2006, 23:57
Avatar de omega2122  
Fecha de Ingreso: julio-2006
Ubicación: My Home
Mensajes: 76
Antigüedad: 11 años, 5 meses
Puntos: 0
Amigo, el problema no lo tiene Mozilla, el problema lo tiene es IE que da la "ilusion e que todo anda bien, cosa que no es haci".....por so te recomiendo que descarges firefox que es mejor y muestra la pagina realmente como es y la pruebas tambien en IE para que veas como otras personas que usan IE la iran a ver...

y sobr el codigo...

( style="position:absolute;width:100;height:100;top: 20px;left:-130px;visibility:hidden;z-index:1" ).. esto creo que estan malo..

mejor colocalo con CSS...prueba

<div id="tabla">
AQUI EL CONTENIDO QUE HIBA A TENER ESA TABLA
</div>

para el css.:

Código:
<style>
#tabla {
position: absolute;
width:100;
height:100;
vertical-align:top;
}
</style>
Basicamente es eso....
__________________
=P jaja..
  #6 (permalink)  
Antiguo 20/07/2006, 05:35
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Esta es el código de mi página

Os coloco el código ya que no he ocnseguido que las capas de abajo se vean en firefox en el mismo sitio que en IE.

haber si podeis ayudarme.

Gracias

<head>
<style type="text/css">
<!--
body {
background-color: #FFF5D7;
margin-top: 0px;
}

.Estilo5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.Estilo8 {
color: #770003;
font-size: 12px;
}

-->
</style>

</head>

<body>
<table width="980" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" align="center">
<tr>
<th height="670" scope="row"><table width="980" height="661" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<th height="110" valign="top" scope="row"><table width="980" border="0" cellspacing="0" cellpadding="0">
<tr>
<th valign="top" scope="row">&nbsp;</th>
</tr>

<tr>
<th valign="top" scope="row"><a href="index.asp"></a><a href="http://www.glasspaint.es" target="_blank"></a><a href="solicitud_presupuesto.asp"></a><a href="contactar.asp"></a></th>
</tr>
</table> </th>
</tr>
<tr>
<th height="551" valign="top" bgcolor="#FFFFFF" scope="row"><table width="980" height="551" border="0" cellpadding="0" cellspacing="0">

<tr>
<td height="551" valign="top" background="images/fondo_index.jpg" scope="row"><p>&nbsp;</p>
<table width="980" height="458" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="307" valign="top" scope="row"><table width="307" height="449" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="221" scope="row" onmouseover="mostrar('capa1')" onmouseout="ocultar('capa1')">&nbsp;</td>
</tr>
<tr>
<th height="226" scope="row" onmouseover="mostrar('capa4')" onmouseout="ocultar('capa4')">&nbsp;</th>
</tr>
</table></th>
<th width="330" scope="row"><table width="307" height="453" border="0" cellpadding="0" cellspacing="0">
<tr>
<th height="126" scope="row">&nbsp;</th>
</tr>
<tr>
<th height="237" scope="row">

<div style="position:relative">
<div id="capa5" style="position:absolute;width:100; height:74px;top:70px;left:-110px;visibility:visible;z-index:1"><img src="images/frase_explicar.gif" width="232" height="71" /></div>
<div id="capa1" style="position:absolute;width:100;height:100;top: 20px;left:-130px;visibility:hidden;z-index:1"><img src="images/frase_confort.gif" width="294" height="170" /></div>
<div id="capa2" style="position:absolute;width:100;height:100;top: 0px;left:-140px;visibility:hidden;z-index:1"><img src="images/frase_seguridad.gif" width="294" height="264" /></div>
<div id="capa3" style="position:absolute;width:100;height:100;top: 20px;left:-130px;visibility:hidden;z-index:1"><img src="images/frase_descanso.gif" width="294" height="170" /></div>
<div id="capa4" style="position:absolute;width:100;height:100;top: 40px;left:-130px;visibility:hidden;z-index:1"><img src="images/frase_discreccion.gif" width="294" height="125" /></div>
</div>

</th>
</tr>
<tr>
<th height="90" scope="row">&nbsp;</th>
</tr>
</table></th>
<th width="343" scope="row"><table width="338" height="447" border="0" cellpadding="0" cellspacing="0">
<tr>
<th height="255" scope="row" onmouseover="mostrar('capa3')" onmouseout="ocultar('capa3')"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="180" height="217">
<param name="movie" value="images/descanso.swf" />

<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/descanso.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="180" height="217"></embed>
</object></th>
</tr>
<tr>
<th height="192" scope="row" onmouseover="mostrar('capa2')" onmouseout="ocultar('capa2')">&nbsp;</th>
</tr>
</table></th>
</tr>
</table>
<table width="980" height="79" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td scope="row"><img src="images/linea_cierre.jpg" width="980" height="1" /></td>
</tr>
<tr>
<td height="78" background="images/fondo_cierreweb.jpg" scope="row"><center>
<p class="Estilo5">&nbsp;</p>
</center></td>
</tr>
</table></td>
</tr>
</table>
</th>
</tr>
</table></th>
</tr>
</table>
</body>
  #7 (permalink)  
Antiguo 21/07/2006, 11:03
 
Fecha de Ingreso: mayo-2006
Mensajes: 48
Antigüedad: 11 años, 7 meses
Puntos: 0
mi solución

Hace poco que estoy en el mundo de los CSS pero me encontré con tu probema y lo que use fuerón hacks.

Por ejemplo para exporer ponia este css:

#aprovechamiento1 {
top: 117px;
left: 317px;
}


y debajo del de explorer ponia este, que sirbe para firefox

html>body #aprovechamiento1 {
top: 265px;
left: 550px;
}

al poner delante html>body solo firefox podía entenderlo y por ello aplicarlo, como ves las distancias en px son diferentes de un navegador al otro y tenia que ir haciendo pruebas con uno de los dos para igualarlos. Mi explicación Explorer caca :P

Espero que te sirva, un saludo!!
Daniel
  #8 (permalink)  
Antiguo 24/07/2006, 04:55
Avatar de Laika  
Fecha de Ingreso: octubre-2001
Mensajes: 1.376
Antigüedad: 16 años, 1 mes
Puntos: 0
Muchas gracias.

Era lo que necesitaba
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 02:55.