Hi there,
I am having some problems with my site displaying correctly in IE6. In particular if you have a look at this page in IE6 http://www.antobbo.webspace.virginmedia.com/photogallery/water.htm the script doesn't seem to be working the way it should, and I think it might be a problem with the css and the z-index.
Here's the script code:
...
<script type="text/javascript">
function change_image(image)
{
$(".overlay").show();
$(".box").show("slow");
$("#" + image).fadeIn(1000);
$(".close_button").show();
$(".close_button").click(function() {
$(this).hide();
$("#" + image).fadeOut("fast");
$(".box").hide("slow");
$(".overlay").hide("slow");
});
}
</script>
...
and the related html
...
<div class="boxes_wrapper">
<div class="thumb_container">
<div class="thumbnail">
<a href="javascript:void(0);" class="full_image"><img src="images/water_thumb_1.jpg" alt="" style="border:0" onClick="change_image('big_image_1')"></a>
</div><!-- END OF thumbnail 1-->
<div class="thumbnail">
<a href="javascript:void(0);" class="full_image"><img src="images/water_thumb_2.jpg" alt="" style="border:0" onClick="change_image('big_image_2')"></a>
</div><!-- END OF thumbnail 2-->
...
and the CSS bit for the script to work:
...
/* FOR THE IMAGES POP UP WINDOW */
.overlay
{
display:none;
background:#cf1dbb;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
top:0px;
bottom:0px;
left:0px;
right:0px;
position:fixed;
z-index:100;
}
.box
{
display:none;
background-color:black;
width:660px;
height:450px;
position:fixed;
left:50%;
margin: 0 0 0 -330px; /* to centre a fixed div jus give it left 50% and move it back half of its width*/
top:10%;
z-index:101;
}
.standalone_image
{
/*background:url(../images/water_full_3.jpg) no-repeat;*/
position:absolute;
z-index:101;
width:602px;
height:399px;
top:25.5px;
bottom:25.5px
left:29px;
right:29px;
/*border:1px solid red;*/
}
.close_button
{
display:none;
left:94%;
/*background:url(../images/close_button.png);*/
width:40px;
height:40px;
position:absolute;
z-index:102;
}
...
In IE6 when I click on a thumbnail the big image comes up but no close button therefore that messes up everything because if you click on another thumbnail another picture comes up and so on.
Now I was wondering whether the best way to sort this is to create a conditional css just for IE6. Also, not quite sure if IE6 isn't fully compatible with the z-index? COuldn't find that much on google
any suggestion will be much appreciated as usual
thanks a lot