Capa de posicion absoluta y problema con select

karlic0s · #1 (**permalink**) 22/03/2009, 16:21

Tengo una capa que esta encima de otra en la otra capa hay select con sus option, al poner una capa encima de esta, los select de la capa de abajo salen en la capa superpuesta, pero (como no) solo tengo problema en internet explorer. Alguna solución?

div.capa {
position: absolute;
top:225px;
left:40px;
z-index:100;
height: 500px;
width: 500px;
background-color:#FFFFFF;
border: solid 1px #000000;
}

select {
width: 225px;
border: 0px solid #999;
color: #333;
padding:2px;
font-size:16px;
background-color: transparent
}

Adjunto captura para que me entendais:

willyfc · #2 (**permalink**) 22/03/2009, 19:39

la verdad hermano no te entiendo muy bien, podrías ser un poco más claro?

karlic0s · #3 (**permalink**) 23/03/2009, 04:26

Tengo dos capas, una encima de otra superpuesta con z-index (la de abajo y la de arriba) pues bien, los elementos de la capa de abajo, al poner la otra capa arriba, no se ven (esto es correcto, puesto que la capa de arriba esta superpuesta a la de abajo), me pasa con todos los elementos bien, excepto con los select, que como podeis observar no respetan el z-index de la capa de arriba y solo me pasa en internet explorer, a ver si asi queda mas claro :)

willyfc · #4 (**permalink**) 23/03/2009, 08:01

y esto en que versión de ie te pasa?, por que según entiendo tu problema es que la capa de abajo contiene los select's y luego aparece otra capa y tiene que cubrir los select's(esta es la capa que tiene borde rojo), pues creo que no los tapa por que tal vez la capa que tiene que hacerlo no tiene un z-index, mira:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.capa {
position: absolute;
top:225px;
left:40px;
z-index:100;
height: 500px;
width: 500px;
background-color:#FFFFFF;
border: solid 1px #000000; 
}
 
select {
width: 225px; 
border: 0px solid #999; 
color: #333; 
padding:2px;
z-index:200;
font-size:16px; 
background-color: transparent;
}
.super{width:300px; height:300px; position:absolute; z-index:300; background-color:#999;}
</style>
</head>
 
<body>
<div class="capa">
    <div class="super"></div>
    <select>
        <option>Selecciones</option>
    </select>
</div>
</body>
</html>

o es así o si es ie6 puede que tenga problema con que declares div.capa y no solo .capa o que lo haces sin asignar a otro lugar como ser #cont div.capa.

a ver si es eso lo que necesitas, si no avisas para darle otra solución

karlic0s · #5 (**permalink**) 23/03/2009, 08:13

Gracias willyfc por tus respuestas, pero he encontrado "la solución" al problema:

Es un error de internet explorer: (fuente: desarrolloweb)
Esto es porque los ciertos componentes de la página (elementos de formulario selec, applet, object, plig-is y en algunos navegadores iframe), son elementos propios del sistema operativo y quedan en algunos casos fuera del control de las hojas de estilo. En inglés le llaman Windowed a estos elementos y Windowless a los otros (la gran mayoría), que sí se pueden editar por completo con CSS.

Poniendole un iframe encima de los select o ocultando estos campos select se soluciona el problema.

Saludos y de nuevo gracias

willyfc · #6 (**permalink**) 23/03/2009, 08:17

si acabo de leer eso mira este tema puede que te interese vínculo