IEPNGFix v1.0RC5 Preview Release 5

1) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

v1.0RC5 Preview 5 is live, you can download it here: /test/ for now. This includes the following changes:

* Re-fixed CSS className changing (and via this, a:hover support with Whatever:hover).
* Changed the dimension estimation code to set offsetWidth and clientHeight, and also dynamically apply display:inline-block to inline elements like links, meaning text can wrap around them as per normal.
* Included an inline link and an INPUT element in the demo document.
* Removed the LIGHTWEIGHT attribute to the component to fix "data not available" errors.
* Tweaked the documentation with hopefully-clearer implementation instructions.

Previous release history and comments on the RC5 series:

/cgi-bin/forum.pl/iepngfix/136

Download and enjoy! Let me know if you can find any issues; I'm particularly interested in element distortion.

- Angus.

2) Henrik Group: Members
Posts: 2 Joined: 3 Feb 2008 Location: Denmark IP: 90.184.--.--

Posted:

I have tried this release, and the previous one. Great scripts but I hat two problems. One I that's easily solved and one not.

1. The script sets the height and width property in order to give the elements layout. I use elastic/fluid layout so heights an width must be set to auto. Solution: Only set the heigh property and set this to 0 (style.height = 0;). This way the element will get layout but height an with will still be set to auto. This change works fine in Ie6 on PC.
Read more about having layout: http://www.satzansatz.de/cssd/onhavinglayout.html

2. Due to a limitation in the IE transparency filter background positions is not supported. Yes – I no – I'm not the first to write about this problem but the thing is, unless this problem is solved, either by changing the script or by a workaround, the script will be useless to me – sorry.

3) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 118.92.--.--

Posted:

Thanks for your feedback!

1) Yes, I know about that, in fact I link to the very same site in the readme for the script :). You have to remember though that the script has to work with a lot of layouts, for instance with an absolutely positioned element setting the height to zero will somewhat break it! I might experiment with that though.

2) I am actually thinking of hacking in an additional "plugin" script that would add limited support for background positions.

- Angus.

5) Henrik Group: Members
Posts: 2 Joined: 3 Feb 2008 Location: Denmark IP: 90.184.--.--

Posted:

1) Suggestion: you could check if the element is absolutely positioned. If yes height and width property is set. If not height property is set to 0.

2. Looking forward to that.

7) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.109.--.--

Posted:

Whoops, post corrected to linkify the path to the download :).

- Angus.

8) Dave Miers Group: Guests
IP: 75.67.--.--

Posted:

Just gave the script a try for the first time(first time user of your scripts) and noted one little minor problem in the included html file with directions. The code posted there seems to have the ending semi-colon after the ending braces which was one of the problems I had to begin with. I use menumachine with golive 9 and at first it was breaking my menu, but after specifically targeting the image ID name it is now working, thank you! I noted that the "div" tag is not required in the selector and may have been part of my problem I'm not sure.

9) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.109.--.--

Posted:

It does, sorry! That must've been bad copying and pasting by me :). Good spotting!

- Angus.

10) vitoshabg Group: Guests
IP: 83.228.--.--

Posted:

This release is much better than the previous one but I still have some very strange problems with it. You can see on http://kkkk.host-bg.info/MediaDesign/testGIFs/ . Somehow it interacts with the <a> tags. Also the left arrow isn't working. The script which attaches the behavior is executed after the script which manipulates the layout.

11) vitoshabg Group: Guests
IP: 83.228.--.--

Posted:

It adds position: relative to the <a> tags?! Do you know why, could it be fixed.

12) vitoshabg Group: Guests
IP: 83.228.--.--

Posted:

The problem is that the script add position: relative to elements (there is a hard coded list of elements in the .htc file) which are in container which has .png as background image. I found a solution. I've changed "while (t--) tFix[t].style.position = 'relative';" to "while (t--) if(tFix[t].style.backgroundImage) tFix[t].style.position = 'relative';" - checks whether the element has background image. Probably it could break something else but the test page which comes with the .htc is working correct.

13) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.109.--.--

Posted:

It's because the <a> elements are unclickable otherwise if they're within a postitioned element with a PNG background. Sorry, I know position:relative might break a few layouts, but there's really no choice in the matter with this one!

- Angus.

14) vitoshabg Group: Guests
IP: 83.228.--.--

Posted:

I saw the problem with the unclickability of the <a> element when I added my change to the code (see the previous post). I noticed a vary strange behavior: when I have an element with .png background and have another element in it, which has onclick event the event is fired ONLY in the area where the background .png image is transparent. I hope it was clear. Any idea about this?

15) Angus Turnbull Group: Moderators
Posts: 4042 Joined: 7 Dec 2003 Location: New Zealand IP: 203.109.--.--

Posted:

I'm not surprised :). The PNG behaviour does many things odd with elements inside it, and making things "position:relative" is the best fix (alternatively, you may wish to experiement with other methods for giving elements "layout", google for "hasLayout" for more info).

Either that or just overlay whatever it is on top of your PNG using absolute positioning, that's often a cleaner solution.

- Angus.