Velocity Reviews - PNG transparency in IE6

On Apr 29, 10:52*am, Jake Barnes <lkrub...@geocities.com> wrote:
> Please look at this page in IE6:
>
> http://www.teamlalala.com/lark/Simplicity%20ie.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/D..._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[i]);
}
}
$.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.