Foros del Web » Creando para Internet » CSS »

Problema con Z-Index en IE con texto e imgs

Estas en el tema de Problema con Z-Index en IE con texto e imgs en el foro de CSS en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 02/10/2009, 17:19
Avatar de hshadow  
Fecha de Ingreso: abril-2008
Mensajes: 42
Antigüedad: 9 años, 7 meses
Puntos: 0
Problema con Z-Index en IE con texto e imgs

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.
  #2 (permalink)  
Antiguo 02/10/2009, 17:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Z-Index en IE con texto e imgs

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.
  #3 (permalink)  
Antiguo 02/10/2009, 17:49
Avatar de hshadow  
Fecha de Ingreso: abril-2008
Mensajes: 42
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Problema con Z-Index en IE con texto e imgs

Sos un groso! Perfecto.
Gracias.
  #4 (permalink)  
Antiguo 02/10/2009, 17:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Z-Index en IE con texto e imgs

De nada, es un placer.

Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:50.