PNG transparency in IE6

[Jake Barnes]

Please look at this page in IE6:

http://www.teamlalala.com/lark/Simplicity ie.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<numSlides; i++) { // Add our slides to the document
var newImage = document.createElement('img');
newImage.src = imageDir+i+'.jpg"
referenceToSlideContainer.appendChild(newImage);

// $(slideContainer).append('<a class="doNotAppear" href='+slideLink
+'><img class="doNotAppear" src="'+imageDir+i+'.jpg" /></a>');
}


You can see that I've tried two methods of adding images to the page.
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.

Does anyone have a solution about how we can get rid of the big gap at
the bottom of the page?

 

[David Mark]

Please look at this page in IE6:

http://www.teamlalala.com/lark/Simplicity ie.htm

No thanks.

In IE6, you can see a huge gap at the bottom of the page, underneath
the footer. We would like to fix this.
Okay.


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

A p,a,c,k,e,d mess.

It is explained here:

http://www.dillerdesign.com/experiment/DD_belatedPNG/

Script opens with:

/*
PLEASE READ:
Absolutely everything in this script is SILLY. I know this. IE's
rendering of certain pixels doesn't make sense, so neither does this
code!
*/

Appears to be the case. Uses VML to "fix" PNG's.

"To-Do List

* Find bugs.
* ???
* Profit!
* Test for memory leaks.
* This item will always persist: find performance improvements."

"Profit!" was struck. Did you buy this?

We also have this script to drive the slideshow on the front page:

http://www.teamlalala.com/lark/img/slide.js

/*
* Simplicity Home Page Slideshow Javascript
* SPJ 2/09
*/


jQuery.preloadImages = function() {
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments);
}
}
$.preloadImages("img/main-slide/1.jpg", "img/main-slide/2.jpg", "img/
main-slide/3.jpg" );

Of course. Interesting mix of the old "$" and newer "jQuery" syntax.

The problems arise with these lines:

for(i=1; i<numSlides; i++) { // Add our slides to the document
        var newImage = document.createElement('img');
        newImage.src = imageDir+i+'.jpg"
        referenceToSlideContainer.appendChild(newImage);

//              $(slideContainer).append('<a class="doNotAppear" href='+slideLink
+'><img  class="doNotAppear" src="'+imageDir+i+'.jpg" /></a>');

}

You can see that I've tried two methods of adding images to the page.

Yes. One sane and one jQuery.

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.

Note that.

We need to find  way to have the slide show and also have the PNG
fix.

If you remove just the PNG fix, then you will still have a slide show
(sort of.) Add a conditional comment for IE < 7 and Google "IE6 fix
PNG alpha" for examples. The solution isn't very involved, especially
for slide show images.

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>

Okay. Didn't want to fix the DIV's.

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.

Is the container the whole document? If so, then refine your
approach.

You apparently have some slide images with translucent pixels. Do
they actually need translucent pixels? If not, fix them with a paint
program. As for your DIV backgrounds, which I assume means rounded
corners, use conditional comments to include a style sheet for IE <
7. Use GIF's as substitutes. No script needed.

Does anyone have a solution about how we can get rid of the big gap at
the bottom of the page?

You already answered that.