jquery not working in IE6

IE6, jquery

[dupalo]

HI folks,
I am having a bit of a nightmare with a script I have created for my site [antobbo.webspace.virginmedia.com ]. If you use IE6 and click on an image the script doesn't work whereas it does work with all other browsers. The thing is that I don't get an error message or anything so I just don't know what to do, i don't know where to start from. The reason why I would like it to work in IE6 is because I would like to put it on my cv.
Here's the script:

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>

A curious thing is that the script kind of works on my local copy of the website ( the pictures overlap one another when I click on the thumbnails) but it doesn't work online at all.

Here are the relevant bits in the html:

...
<div class="thumb_container">

      <div class="thumbnail">
      <a href="javascript:void(0);" class="full_image"><img src="images/faith_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/faith_thumb_2.jpg" alt="" style="border:0" onClick="change_image('big_image_2')"></a>      </div><!-- END OF thumbnail 2-->
...
 <div class="standalone_image"><!-- BOX FOR THE IMAGE-->
       <img src="images/faith_full_1.jpg" alt="" style="display:none" id="big_image_1">
       <img src="images/faith_full_2.jpg" alt="" style="display:none" id="big_image_2">

Here's the relevant CSS bits:

...
/* 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: -215px 0 0 -330px; /* to centre a fixed div just give it left 50% and move it back half of its width*/
/*top:10%;*/
top:50%;
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;
}
...

To solve the problem with IE6 in my local copy of the website somebody told me to add this to the beginning of the script to hide all the images as soon as the script starts, but it doesn't seem to be that successful:

$("#" + image).hide();
$(".box").hide();
$(".overlay").hide();

Now, does anybody know how to fix this script for IE6, or even an indication would be good because I am at loss
thanks

[rainborick]

IE6 may not support onclick on <img> tags. Can you move it to your <a> tag?

[dupalo]

Hi rainborick,
thanks for the post.
It turned out that the onclick is not the problem. I have spent a good 5-6 hrs and I have now sorted few problems but not everything. The big picture did actually show up when I clicked on the thumb, but my stupid laptop seems to be a bit dodgy with scripts sometimes it just doesn't work, so I tested on a different machine and it wasn't bad. The problem though was with the different boxes (the picture itself, the picture container and the close button) all scattered around the page: the picture on the top, only a quarter of the picture box showing on the bottom left of the page and the close button on the right, so it was a problem with the css really which I have now finally partially solved using a hack I have found somewhere

* html .box {
  position: absolute;
}

Obviously I have used a conditional css just for IE6 and below.
There are though 2 big problems still that I am really struggling to solve: I can't give the big picture a fixed position because ie6 doesn't like it, a position fixed seems to be treated as an absolute position (at the moment it has position:absolute but even if I give them a fixed position nothing changes) whereas I want the picture to stay in the middle all the time, no matter if I scroll down.

The other problem is the overlay that is not coming up at all. I worked on the css but it just doesn't come up and I am not sure why

If you look at the link in ie6 and in another browser you will see the difference [antobbo.webspace.virginmedia.com ] (sorry if I include the link it is not for promotion but it will take too much space to include the normal css and the ie6 css for comparison)

Also the script on the home page doesn't work properly. when the picture changes you can see the preceeding picture appearing for a moment (this is in all the browsers unfortunately not only in ie6)

Any idea how to fix these things?
thanks

[rainborick]

position:fixed is like position:absolute in that it removes the element from the normal document flow. So you have to allocate space for that element so that it doesn't obscure the rest of the page. In both cases, you need to remember that the position of these elements is determined in relation to its parent positioned element. That means you need to give an explicit position setting for the parent element, even if it's just "position:relative; top:0; left:0;". Hope this helps.

[dupalo]

uhm, it works in the other browsers though...at any rate the container box seems to have a position fixed already:

.box {
  background-color: black;
  display: none;
  height: 450px;
  left: 50%;
  margin: 0 0 0 -330px;
  position: fixed;
  top: 10%;
  width: 660px;
  z-index: 101;
}