Foros del Web » Creando para Internet » CSS »

z-index issues in IE

Estas en el tema de z-index issues in IE en el foro de CSS en Foros del Web. Hi all, I'm having some issues with my web page. Currently, I'm displaying a and I'm trying to simulate a lightbox. With my current ...
  #1 (permalink)  
Antiguo 02/07/2009, 13:31
Fecha de Ingreso: junio-2009
Mensajes: 2
Antigüedad: 9 años
Puntos: 0
z-index issues in IE

Hi all,

I'm having some issues with my web page. Currently, I'm displaying a and I'm trying to simulate a lightbox. With my current code, it is working as expected in safari, chrome and ff. But in IE its not working properly (as always :S); the background div is being displayed above the gallery. Here is my code:


html {
height: 100%;

body {
margin: 0px;
padding: 0px;
height: 100%;
background: url(../images/background.jpg) repeat-x top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #4B4B4B;

#wrapper {
margin: 0px auto;
width: 770px;
background: #fff;
min-height: 100%;
position: relative;

* html #wrapper {
height: 100%;

#slideshow_bg {
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
min-height: 100%;
width: 100%;
background: #333;
opacity: 0.5;
filter: alpha(opacity=50); /* IE's opacity*/

/* Calculating height for IE6. When using the "height" attribute, the slideshow background doesn't reach the end of the page.
TODO find a better solution */
* html #slideshow_bg {
_height: expression(document.body.clientHeight);

IMAGE.CSS (this is stylesheet for the gallery. I added the z-index and the width )

.imageGalleryWrapper {
padding: 20px 20px;
text-align: center;
position: absolute;
z-index: 200;
top: 14%;
left: 12%;
background: #fff;
width: 540px;



<div id="wrapper">
<div id="slideshow_bg"></div>
<div id="header">
<a href="index.html">Home</a> | <a href="#">Login</a> | <a href="#">Register</a>
<div id="navigation_bar">
<div id="navigation_links">
<a href="gallery.html">Photos</a> |
<a href="#">Groups</a> |
<a href="#">Forums</a> |
<a href="#">Events</a> |
<a href="#">My dog appointments</a>
<div id="main-content">
<div jsId="imageItemStore" dojoType="" url="images.json"></div>
<div id="gallery" dojoType="dojox.image.Gallery"></div>
<div id="grey-footer">
<a href="index.html">Home</a> | <a href="#">About us</a> | <a href="#">Contact us</a> | <a href="#">Feedback</a>

Can anyone PLEASE help me out?
  #2 (permalink)  
Antiguo 02/07/2009, 13:47
Avatar de DragonX
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.388
Antigüedad: 16 años, 1 mes
Puntos: 167
Respuesta: z-index issues in IE

In IE7 is working all right!
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
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.

La zona horaria es GMT -6. Ahora son las 12:32.