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:
Code:
<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:
Code:
.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:
Code:
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!
thanks