Problema con Z-Index en IE con texto e imgs

hshadow · #1 (**permalink**) 02/10/2009, 16:19

Hola a todos.

Tengo un documento en el que tengo un cuadrado dividido en dos partes, cabezal y cuerpo, y por medio del css, "arriba" tiene una capa que contiene un link.
Hasta ahi ningun problema, es multibrowser y todo, pero si agregan texto o imagenes dentro de las partes, en IE (6, 7 y 8) en el momento de pasar el mouse por ahi el efecto se pierde (como si esos elementos estubieran encima de la capa).

¿Como hago con css o html para que la capa se mantenga adelante de todo sin importar los contenidos de la misma forma que lo hace FF?

Aca el documento:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.contenedor_cosa{
position:relative;}

.capa{
position:absolute;
top:0px;
left:0px;
width:300px;
height:500px;
z-index:1000;}

.capa a{
width:300px;
height:500px;
display:block;}

.cosa{
width:300px;
height:500px;
border:3px solid #666666;
z-index:0;}

.cosa_cabezal{
height:200px;
background-color:#FFFF00;}

.cosa_cuerpo{
height:300px;
background-color:#00FF00;
position:relative;}

.cosa_saliendo{
background-color:#CCCCCC;
position:absolute;
top:0px;
left:0px;
width:300px;}
</style>

</head>

<body>
<div class="contenedor_cosa">
    <div class="capa">
        <a href="http://www.google.com.ar">&nbsp;</a>
    </div>
    <div class="cosa">
        <div class="cosa_cabezal">Cabeza de Lorem</div>
        <div class="cosa_cuerpo">
        	Cuerpo de Lorem<br />
			<img src="http://www.huiramba.org/Imagenes/Fotografias/Huiramba-DesdeElSur-DETALLE-AzulMonta%C3%B1a&AzulCielo.jpg" alt="" />
        </div>
    </div>
</div>
</body>
</html>

Gracias de antemano. Saludos.

Mikmoro · #2 (**permalink**) 02/10/2009, 16:34

Ponle al enlace una imagen de fondo que no exista:

.capa a{
width:300px;
height:500px;
display:block;
background: url(img/falsa.gif);
}
A ver qué tal.

hshadow · #3 (**permalink**) 02/10/2009, 16:49

Sos un groso! Perfecto.
Gracias.

Mikmoro · #4 (**permalink**) 02/10/2009, 16:50

De nada, es un placer.

Saludos.