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í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"> </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.