Ver Mensaje Individual
  #3 (permalink)  
Antiguo 11/10/2009, 08:57
filmixt
 
Fecha de Ingreso: septiembre-2008
Mensajes: 91
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: Superposición, problemas en IE =D

Las tablas son el contenido y los divs el continente, por tanto no deberia de crear incompatibilidades ya que pretendo que los div se posicionen en el lugar correspondiente, y ya meter el contenido en ellos.

He estado varias horas buscando en internet y, si me permitis, os explicaré a que me he enfrentado esta mañana.

Resulta ser que cuando usamos la posicion relativa (position:relative), debemos contar con que, en navegadores con IE, desconozco cuales más, el alto del elemento al que asignamos como relative se agrega debajo del div creando un espacio invisible.
Quizás no me explique suficientemente bien, ejemplo:
<div>
Hola, soy Juan
<div (relativo, con posición -30px) >
<h2>Estoy encima</h2>
</div>
</div>

Como podremos comprobar, el texto se superpone.
La cuestión que planteaba era la siguiente. DEBAJO de todo esto, si tenemos un contenido (lo que sea), pese a que el "Estoy encima" se ha desplazado hacia la posición que queríamos, existe un espacio invisible donde teóricamente debería de estar en caso de no existir ese relative, fastidiandonos por tanto el diseño de la web.

EL ejemplo anteriormente mencionado nos muestra el resultado.

Por tanto, acabo finalmente de encontrar la solución, tras haber probado eliminar el espacio con bottom padding (en negativo), lo cual parcheaba el problema en IE, pero el Firefox pasaba que el texto de abajo se movia al cambiar el display a none y block, en fin, una historia.

A lo que voy, la SOLUCION:

Debemos convertir el elemento en ABSOLUTE, y dado que el objetivo es tener la capa en un sitio exacto en cuanto a posición x (la y se vé inalterada), asignamos un porcentaje en right o left, en cuanto a posición X se refiere, y luego desplazarlo X pixeles para ponerlo en el lugar que queremos.

Ejemplo del estilo de la capa absoluta:

position:absolute; margin: 0; left: 50%; margin-left:-64px; top: 140;

Esto nos anclará el layer de forma central y se verá inalterado al redimensionar el navegador.

Si se entiende regular, disculpen xDD, es cuestion de probar ya con eso.
Un saludo y gracias por las molestias!!!