overlay in internet explorer 6 not working

[dupalo]

Hi there, I am having such an nightmare with this, and I have spent hours trying to fix it, but nothing, I just can't work out why it's not working. SO, the problem I am having on my website is with the overlay. If you view the website in any browser except IE6 you notice that there is a black overlay that covers the whole page when you click on a thumbnail image. I am trying to replicate this in IE6 but it just doesn't want to work, the overlay doesn't go where it should, it is actually just a line across the top of the page.
Here's the relevant code.
HTML:

<div class = "overlay">
</div><!-- END OF overlay -->

<div class = "[COLOR="rgb(160, 82, 45)"]full_images[/color]">
<div class = "image_div">
<img src = "images/animal_full_11.jpg" alt = "" id = "image1" style="display:none">
<img src = "images/animal_full_12.jpg" alt = "" id = "image2" style="display:none">
<img src = "images/animal_full_13.jpg" alt = "" id = "image3" style="display:none">
</div><!--END OF image_div -->
<div class = "[COLOR="rgb(160, 82, 45)"]close_button[/color]">
<a href="javascript:void(0);"><img src = "images/button_9.gif" alt = "" style="border:0"></a>
</div><!-- END OF close_button -->
</div><!-- END OF full_images -->

CSS:

.overlay
{

display:none;
background-color:black;
position:relative;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
top:0;
bottom:0;
right:0;
left:0;
width:100%;
z-index:100;

} 

.full_images
{

display:none;
background-color:black;
position:relative;
width:700px;
height:490px;
z-index:102;
left:50%;
top:50%;
margin:-650px 0 0 -350px; 

}

.image_div
{

border:1px solid transparent;
width:660px;
height:450px;
margin:20px auto 0;
z-index:103;
/*no positioning so that I can centre the image*/
position:relative;
}

.close_button
{

position:absolute;
top:0;
right:0;
z-index = 104;

}

External script:

var $full_images;
var $close_button;
var $overlay;

$(function(){
$full_images = $(".full_images");
$close_button = $(".close_button");
$overlay = $(".overlay");
});

function change_images(image){
var $images = $("#" + image);

$overlay.hide().show();
$full_images.hide().show("slow");
$images.hide().fadeIn(1000);
$close_button.hide().show();

$close_button.unbind('click').click(function(){
$(this).hide();
$images.fadeOut("fast");
$full_images.hide("slow");
$overlay.hide("slow");

});


}

I have spent hours testing this but I don't know what it is preventing IE6 from displaying the overlay.
Any help much appreciated!
let me know if you require the full code
thanks

[alt131]

Hi Dupalo, I think the reason you have had difficulty getting a response to your question is that the posted code isn't really showing the issue. The overlay will not cover the entire page because it has no height, and the thumbnails and the overlay have been set to display:none anyway. If the work is supposed to be done by javascript rather than css, unfortunately the posted script doesn't function, plus the errors in the html mean that the css doesn't apply without being adjusted.

It is possible to create these sorts of lightbox effects with css only - a search on stu nicholls at cssplay will bring up just one site that has been producing css-only and javascript assisted examples that will work as far back as ie6.