Colocar una capa debajo de una imagen

[lemmy2011]

Hola a todos! Tengo una celda. En esta celda hay una imagen y una capa. La capa debe ir apareciendo / desapareciendo, según pasemos el ratón. Pero eso da igual. El tema está que en todos los navegadores me va bien. Excepto en IE, que, en lugar de colocarme la capa justo debajo de la imagen, me la coloca al lado. El código es el siguiente:

//////////////// En el HEAD

#div_bus1 {
position:absolute;
width:190px;
height:120px;
background-color:#FF9B06;
text-align:center;
visibility:hidden;
z-index:10;
}

////////////////// En el BODY

<table>
<tr>
<td>
<a href="[URL_DEL_LINK]"><img src="[URL_IMAGEN]"></a>
<div id="div1">[CONTENIDO DE LA CAPA]</div>
</td>
</tr>
</table>

¿Cómo puedo hacer para que la capa "div1" me aparezca debajo de la imagen?

Muchas gracias!

[Naahuel]

¿Has probado poner left:0 y top:0 al elemento con posicionamiento absoluto? Es un problema que yo también he tenido, si no hay coordenadas por CSS Internet Explorer directamente lo ubica seguido del elemento anterior.

Tal vez sea eso.

[lemmy2011]

Gracias pro la respuesta. Pero no me funciona. Es que claro, si le pongo posicion absoluta a la capa con left:0px; top:0px; me la engancha a la esquina superior de la pantalla. No de mi TD. Habñia pensado, darle posición relative a la capa. Haciendo que estuviese ligada al elemento contenedor ( es dcir, el TD ) pero entonces me reserva todo el espacio que necesita la capa, quedando un hueco vacío entre el menñu y el contenido dela página. Esto lo he solucionado, usando display:none, en lugar de visibility:hidden. Pero, después, al mostrar el submenú mediante display:block el contenido de la web se desplaza hacia abajo, es decir, lo que crece el submenú, es lo que se desplaza en contenido... A mejor hay algún otr valor de display que simplemente muestre la capa? Sin desplazar hacia abajo el contenido posterior?

[Naahuel]

Mmmm, ahora no recuerdo bien pero había ciertos problemas de concepto en dar "position:relative" a una celda. Seguramente se puede, no recuerdo bien ahora.

Podés intentar esto:

Código HTML:

<table>
    <tr>
        <td>
        <div class="contenedor">
            <a href="[URL_DEL_LINK]"><img src="[URL_IMAGEN]"></a>
            <div id="div1">[CONTENIDO DE LA CAPA]</div>
        </div>
        </td>
    </tr>
</table>
 

Entonces al DIV con clase "contenedor" le das position:relative;

[lemmy2011]

Sí. De esta manera sí que colocaría el DIV debajo de la imagen. Pero me surjen una serie de problemas:
1) El TD pasa a tener el mismo width que la capa, perdiendo el width correcto
2) Si utilizo la propiedad visibility: hidden/visible, el TD reserva siempre el height de la capa. Esté visible o no.
3) La manera de solucionar esto sería utilizar display:none/block en lugar de visibility: hidden/visible. El problema entonces es que, al mostrar el contenido de la capa ( submenú ) todo el contenido de la página que se desplaza hacia abajo.

Vaya! Nunca pensé que costaría tanto hacer un menú con submenús verticales...