Capas que cambian de posición en Firefox

Laika · #1 (**permalink**) 14/07/2006, 02:16

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>

caricatos · #2 (**permalink**) 14/07/2006, 02:58

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

Laika · #3 (**permalink**) 14/07/2006, 05:10

¿Lo asigno como estile, como atributo quete refieres al tamaño de de las imagenes?

Laika · #4 (**permalink**) 18/07/2006, 02:40

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

omega2122 · #5 (**permalink**) 19/07/2006, 22:57

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....

Laika · #6 (**permalink**) 20/07/2006, 04:35

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

</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"> </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> </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')"> </td>
</tr>
<tr>
<th height="226" scope="row" onmouseover="mostrar('capa4')" onmouseout="ocultar('capa4')"> </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"> </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"> </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')"> </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"> </p>
</center></td>
</tr>
</table></td>
</tr>
</table>
</th>
</tr>
</table></th>
</tr>
</table>
</body>

Dani392 · #7 (**permalink**) 21/07/2006, 10:03

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

Laika · #8 (**permalink**) 24/07/2006, 03:55

Muchas gracias.

Era lo que necesitaba