conflict between PNG fix for IE and my attempt to add images to thepage

J

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 < 4; i++) { // Add our slides to the document
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>");
}


You can see that I've tried two different 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?

I've installed FireBug Lite to help debug. I see that the PNG fix adds
in a bunch of invisible images with the class of
DD_belatedPNG_sizeFinder. I've set this style in the style sheet:

..DD_belatedPNG_sizeFinder {
display:none;
width:0px;
height:0x;
}

Yet there is still a big gap at the bottom of the page.
 
R

RobG

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.

It seems to me that your fundamental problem is related to CSS and
HTML. Once you have worked out how to fix the problem, script might
be a tool that can be used to implement it.

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

Your supply of the link is well intended, but I doubt anyone is going
to bother trying to decypher minified, obfuscated code to try and fix
your issue.


I think the typical answer is to use conditional comments to add an
alternative stylesheet for particular versions of IE.
We also have this script to drive the slideshow on the front page:

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

Hmmm, munging jQuery in there as well. All bets are off I'm afraid,
you have two libraries (one obfuscated) that may be interfering with
each other (or not).

The problems arise with these lines:

for(i=1; i < 4; i++) { // Add our slides to the document
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>");

}

You can see that I've tried two different 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.

So the two libraries are inteferring with each other. Cool.

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

The simplest answer is to ditch the png fix script and use something
else, or ditch the use of PNG altogether. The various attempts to fix
it using script are providing layers of abstaction from the underlying
problem that is HTML and CSS related. Attempting to fix it by trial
and error is not a good idea, the result will be difficult to maintain
and likely not particularly robust.

Work out what the DOM should actually look like first, then consider
the tools you want to use to achieve that.
 
L

Lawrence Krubner

It seems to me that your fundamental problem is related to CSS and
HTML.  Once you have worked out how to fix the problem, script might
be a tool that can be used to implement it.



Your supply of the link is well intended, but I doubt anyone is going
to bother trying to decypher minified, obfuscated code to try and fix
your issue.





I think the typical answer is to use conditional comments to add an
alternative  stylesheet for particular versions of IE.





Hmmm, munging jQuery in there as well.  All bets are off I'm afraid,
you have two libraries (one obfuscated) that may be interfering with
each other (or not).







So the two libraries are inteferring with each other.  Cool.

The two scripts are interfering with each other. I wouldn't call them
libraries. The line with the jQuery is commented out. It is not in
use. I could also use a different onload method, other than the jQuery
one (personally, I prefer Simon Willison's), but it would make no
difference, as that is not the part that is causing the problem.






The simplest answer is to ditch the png fix script and use something
else, or ditch the use of PNG altogether.  The various attempts to fix
it using script are providing layers of abstaction from the underlying
problem that is HTML and CSS related.  Attempting to fix it by trial
and error is not a good idea, the result will be difficult to maintain
and likely not particularly robust.

Work out what the DOM should actually look like first, then consider
the tools you want to use to achieve that.


The job I've been assigned is to fix the problem with the current
scripts, not introduce other scripts.
 
L

Lawrence Krubner

It seems to me that your fundamental problem is related to CSS and
HTML.  Once you have worked out how to fix the problem, script might
be a tool that can be used to implement it.



Your supply of the link is well intended, but I doubt anyone is going
to bother trying to decypher minified, obfuscated code to try and fix
your issue.

Fair enough. I've switched over to the non-minified version:

http://www.teamlalala.com/lark/Simplicity ie_files/DD_belatedPNG_0.0.7a-min.js
 
L

Lawrence Krubner

It seems to me that your fundamental problem is related to CSS and
HTML.  Once you have worked out how to fix the problem, script might
be a tool that can be used to implement it.



Your supply of the link is well intended, but I doubt anyone is going
to bother trying to decypher minified, obfuscated code to try and fix
your issue.





I think the typical answer is to use conditional comments to add an
alternative  stylesheet for particular versions of IE.





Hmmm, munging jQuery in there as well.  All bets are off I'm afraid,
you have two libraries (one obfuscated) that may be interfering with
each other (or not).







So the two libraries are inteferring with each other.  Cool.


The simplest answer is to ditch the png fix script and use something
else, or ditch the use of PNG altogether.


I'm being brought in on a project that other people have been working
on for months. I don't think I could tell them to get rid of their
PNGs. I think a significant amount of money has already been spent on
the graphics. And we are talking about a huge website.
 
D

David Mark

The two scripts are interfering with each other. I wouldn't call them
libraries. The line with the jQuery is commented out. It is not in
use. I could also use a different onload method, other than the jQuery
one (personally, I prefer Simon Willison's), but it would make no
difference, as that is not the part that is causing the problem.




The job I've been assigned is to fix the problem with the current
scripts, not introduce other scripts.

Often problems are solved by removing (or replacing) bad scripts.
 
D

David Mark

I'm being brought in on a project that other people have been working
on for months. I don't think I could tell them to get rid of their
PNGs. I think a significant amount of money has already been spent on
the graphics. And we are talking about a huge website.

Paralysis by analysis. Anybody who spent a "significant amount" on
graphics knows how to batch convert them. Losing the PNG's is not the
only option either.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top