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?