Hi all, I'm having some issues with my web page. Currently, I'm displaying a Dojox.image.gallery 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:
SKIN.CSS 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 dojox.image.gallery 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; } SLIDESHOW.HTML <body> <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> <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> </div> <div id="main-content"> <h1>Gallery</h1> <div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div> <div id="gallery" dojoType="dojox.image.Gallery"></div> </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> </div> </div> </body> Can anyone PLEASE help me out? ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/