This is a tough one. Any help, much appreciated. I've been experimenting all day with different ideas toward fixing this, but so far nothing has worked.
Please look at this page in IE6: http://www.teamlalala.com/lark/Simplicity%20ie.htm In IE6, you can see a huge gap at the bottom of the page, underneath the footer. We would like to fix this. The problem arises from a conflict between our PNG fix, and our slideshow. This is the script we are using to fix the PNG bug in IE6: http://www.teamlalala.com/lark/img/DD_belatedPNG_0.0.7a-min.js It is explained here: http://www.dillerdesign.com/experiment/DD_belatedPNG/ We also have this script to drive the slideshow on the front page: http://www.teamlalala.com/lark/img/slide.js The problems arise with these lines: for(i=1; i < 4; i++) { // Add our slides to the document var currentInnerHtml = referenceToSlideContainer.innerHTML; var newHtml = currentInnerHtml + "<a href=''><img src='img/"+i +".jpg' /></a>"; referenceToSlideContainer.innerHTML = newHtml; // var newImage = document.createElement('img'); // newImage.src = "img/"+i+".jpg" // var newLink = document.createElement('a'); // newLink.appendChild(newImage); // referenceToSlideContainer.appendChild(newLink); // $("#main-slide").append("<a href=''><img src='img/"+i+".jpg' /></ a>"); } Please note that there are 3 blocks of code in that loop, and 2 of them are commented out. As I said before, I've been trying different things all day. We started with the jQuery line (the last line). Then I tried using DOM methods to add the images to the page. The problem was still there. So then I tried adding the images using innerHTML. This doesn't fix the problem either. If I comment out all these lines, then I get an error "Too few slides, slideshow terminating" and then the gap at the bottom of the pages disappears - but then we have no slideshow. If I comment out this whole for() loop, then the gap at the bottom of the page is fixed, but we no longer have a slide show. We need to find way to have the slide show and also have the PNG fix. In the file "Simplicity ie.htm" you will see this line: <SCRIPT>DD_belatedPNG.fix('#container div, #container img');</SCRIPT> This fixes the problem of having a gap at the bottom of the page: <SCRIPT>DD_belatedPNG.fix('#container img');</SCRIPT> In other words, if we take out "'#container div", then there is no more gap at the bottom of the page. And the slide show appears. However, most of the PNGs that we need to have appear on this site are actually loaded as the background images to divs. So we need to keep this script working for divs. We need it to fix the background PNGs we use with various divs. The gap also appears on other pages on the site, where we are not using the jQuery Cycle plugin, but where we do have a preload image script such as this one: jQuery.preloadImagesByClass = function(arrayOfImages) { for(var i = 0; i<arrayOfImages.length; i++) { var thisImage = arrayOfImages[i]; jQuery("<img>").attr("src", thisImage); } } $(document).ready(function() { $.preloadImagesByClass($(".preload")); }); So, I'm thinking both this script and the jQuery cycle plugin that the PNG fix conflicts with. Does anyone have a solution about how we can get rid of the big gap at the bottom of the page?
