Superposición, problemas en IE =D

filmixt · #1 (**permalink**) 11/10/2009, 05:06

Estimados señores,
Estoy trabajando con divs superpuestos, de manera que quiero crear un simple menu encima del contenido, y posicionado de forma relativa.
Parece facil, y quizas lo sea, pero me temo que no consigo por mi mismo encontrar la solucion.

Aqui les dejo mi problema reducido a la minima expresion para que no tengan que trabajar con el caso real que sería una tarea cansina:

Código PHP:

  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>

<div align="center">
  <table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="right" bgcolor="#00FF00" height="30"><div  style="overflow: visible; height: 10px;"><strong>Menu</strong>
      <div style="position:relative; background-color: #009900; layer-background-color: #009900; border: 1px none #000000; left: -20; top: 59;"><strong>Uno<br />Tres</strong></div></div></td>
    </tr>
    <tr>
      <td bgcolor="#FF00FF">Pedrodsd<br />
        dsad</td>
    </tr>
    <tr>
      <td bgcolor="#3399CC">DSd<br />
      Siii</td>
    </tr>
  </table>
</div>
<p align="center">&nbsp;</p>
</body>
</html>

Como podrán ver, tenemos una tabla, con 3 celdas.
La primera celda, debajo de "Menu", tenemos un div que quiero superponer de forma relativa a esta, y que aparezca un poco mas abajo, y un poco mas a la izquierda (es un suponer, pero ha de ser asi :P)
Bien, Mozilla Firefox nos muestra correctamente el tema, =D la primera celda como podéis ver tiene 30 px de alto, en cambio IE no, ya que incorpora la ALTURA DEL DIV RELATIVO debajo del texto "Menu" como si de un gran espacio se tratara.

¿Alguien me puede decir que estoy haciendo mal?
Muchas gracias de antemano y un saludo.

kseso? · #2 (**permalink**) 11/10/2009, 08:11

Cita:

Iniciado por filmixt

¿Alguien me puede decir que estoy haciendo mal?

Básicamente tu error es utilizar un elemento (la tabla) para lo que no fue concebida. En vez de utilizar las etiquetas correspondientes entre casi el centenar que hay disponibles. Y utilizar nomenclatura ya desaprobada (supongo, pues no se ve si utilizas doctype y cuál), como "<div align="center">" o "layer-background-color:"
Si básicamente lo que pretendes es un menú, pásate por las faq's de css, tienes una amplia colección de ellos.

Un saludo

filmixt · #3 (**permalink**) 11/10/2009, 08:57

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