PNG transparency in IE6

Discussion in 'Javascript' started by Jake Barnes, Apr 29, 2009.

  1. Jake Barnes

    Jake Barnes Guest

    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?
     
    Jake Barnes, Apr 29, 2009
    #1
    1. Advertising

  2. Jake Barnes

    David Mark Guest

    On Apr 29, 10:52 am, Jake Barnes <> wrote:
    > 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.
     
    David Mark, Apr 30, 2009
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    4
    Views:
    2,616
  2. Jens Lenge

    PNG graphics transparency

    Jens Lenge, Oct 12, 2004, in forum: HTML
    Replies:
    9
    Views:
    432
    Jeffrey Silverman
    Oct 15, 2004
  3. Leif K-Brooks
    Replies:
    7
    Views:
    12,687
    Froggy
    Jul 20, 2009
  4. Caleb Hattingh
    Replies:
    2
    Views:
    2,082
    Caleb Hattingh
    Dec 1, 2004
  5. Robin Becker

    png transparency with PIL

    Robin Becker, Nov 23, 2007, in forum: Python
    Replies:
    2
    Views:
    421
    Robin Becker
    Nov 23, 2007
Loading...

Share This Page