IE 6 and transparent png's : How to get around it?

Draeger · 18 Jun 2009 at 15:54

Been working on a basic 3 page site and for the main page I have used a transparent png that covers a fair bit of the screen. Totally forgot about IE 6.0 not playing ball with them.

Suggestions on how to solve/get around this?.

Thanks.

tsinc80697 · 18 Jun 2009 at 16:01

PNG Fix, quite a few around or use MS alphaimageloader : http://msdn.microsoft.com/en-us/library/ms532969.aspx

Draeger · 18 Jun 2009 at 16:13

Thanks, I found this and think I will give it a go, is that what you meant when you mentioned pngfix? :-

http://homepage.ntlworld.com/bobosola/pnghowto.htm

Downloaded the JS include version, uploaded the js to the site and added the script text to each page.

Only thing I'm not clear about is they mention that "You must have height and width attributes specified for each image". Whereabout do you add the height and width in?. :confused:

gord · 18 Jun 2009 at 16:18

height and width are img attributes

so

<img width="200" height="200" src="../../rarg.png">

Tripnologist · 18 Jun 2009 at 16:21

DD_belatedPNG is the best fix I've found as it allows background-repeat and background-position.

Draeger · 18 Jun 2009 at 16:23

gord said:
height and width are img attributes

so

<img width="200" height="200" src="../../rarg.png">

Thanks, but whereabout do you edit the height and width in?. In the actual js itself?.

Sorry for being so dumb.

Draeger · 18 Jun 2009 at 16:32

Scratch that, just checked and its working fine in IE 6 now. I guess if you use the js include method you don't have to specify width and height. Cool!!.

GravyMonster · 18 Jun 2009 at 16:32

You need to put the height and width in the HTML for the image, so you'd have...

Code:

<img src="images/myimage.png" />

which you'd need to turn into

Code:

<img src="images/myimage.png" width="100" height="20" />

Personally I use a .htc file which also allows backgrounds with PNGs to be transparent - have a google and it should turn something up.