z-index (and css) and IE6?

[Violet_82]

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

Honestly, find out what percentage of your users actually use IE6, then determine if you should even try to make it work for IE6 at all.

Let's say you spend 20 hours trying to get this to work for 1% of your users, is this beneficial considering you could have been working on something else for 20 hours that benefits 99% of your other users.

There are times when you aren't going to be able to please everyone, pick your battles and focus on the majority first.

This is my 2 cents.

[Violet_82]

Hi stbuchok,
yes I have considered this. There aren't many people probably looking at that in IE6 but there are still some, especially people at work (90% of my coworkers still have IE6 installed for the sake of argument). I am saying this because I would like to include this site on my cv and it will look good if I can prove that I have done some efforts to make it compatible with IE6. DOn't get me wrong, I tthing you are right and under normal circumstances I wouldn't really worry too much, but I would like to make sure that the website is at least usable in IE6 and as things stand at teh moment it is not.