PNG's & MSIE 6

[msflux]

Hi Everyone,

I'm trying to get my PNG's to display correctly on this Website: http://qa.plumproduce.com/

I know there are issues with IE6 and previous versions, however I also know there are fixes out there.

Currently, I'm using this - but it doesn't appear to be working: http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

It calls for this file: http://qa.plumproduce.com/css/iepngfix.htc

and this line of code in the CSS: img { behavior: url(iepngfix.htc); }

Does anyone have a better fix? My PNG's are 100% transparent.

Thanks in advance,
msflux.

[toicontien]

I use an all CSS approach that works perfectly: Internet Explorer and Transparent PNGs (http://www.webdeveloper.com/forum/showthread.php?t=125373#post655131)

[msflux]

That's great, thanks.

So, in the CSS file for IE only can I replace "someDIV" with the container DIV in which all the content is wrapped in, in my case called, "#Container?"

Also, what is the "bg.png" file - is it just a transparent (PNG-24) PNG file?

Thanks for you time!
msflux.

[msflux]

Hello,

I just updated the files on the following site to fix the PNG/IE issue I was having before. I'm unable to test this page on IE6 as I only have IE7 here.

Would someone mind checking out this page and telling me if it looks like the attached image?

http://qa.plumproduce.com/

Thank you!
msflux.

[toicontien]

That's great, thanks.

So, in the CSS file for IE only can I replace "someDIV" with the container DIV in which all the content is wrapped in, in my case called, "#Container?"

Also, what is the "bg.png" file - is it just a transparent (PNG-24) PNG file?

Thanks for you time!
msflux.
That was all just sample code. #someDiv is an Id selector in CSS, meaning, for any tag whose id is "someDiv", apply the following styles.

bg.png is there assuming you'll replace it with the path the your own graphic. It's not "one line of code fixes all." You have to add a style declaration for each PNG you want to fix in Internet Explorer. How much experience have you had with Cascading Style Sheets?

(PS, taking a look at your page right now)

[msflux]

I already have an "id" assigned to some of the PNG images because I'm using inline JS rollovers which require an "id."

I have ample experience with CSS - but this fix is new for me.

[toicontien]

Here's how I would tackle this page:

1. The Plum_Produce_logo image doesn't need to be a PNG. 24 bit PNGs are extremely huge in file size. Save this as a GIF with a transparent background and pick a matte color that's close to the darker color of the part of the background gradient the logo will be placed over. The halo effect should be so minimal only a trained human eye will detect it. A matte color of something like #AED791 would do.

2. That cauliflower image is 168KB in size! That's huge! The total file size of your entire page shouldn't exceed that size. Since your main nav is all graphics, the positions of the Plum_Produce_logo and the cauliflower graphic shouldn't move. Your best bet is to make the cauliflower graphic a JPEG over the background gradient, and position the image so it looks like it fits. No need for transparent PNGs.

Again, my two cents worth. You don't need transparent PNGs here. They provide no more flexibility than existing graphics formats, and actually make your page file size far too large.