PDA

View Full Version : IE & pngs...


Rob_Che
05-12-2008, 09:06 AM
Any idea what version of IE starts to recognise pngs ?

It woeks fine on 7 but don't earlier versions to check it against...

Rob_Che
05-12-2008, 09:07 AM
Oh no.... It appears they don't work in IE 6 ... !

What's the opinion ? Can I really use these as part of a design if they are only recognised in IE 7 and above ?
They seem to be used a hell of a lot...
Wonder if I'm using the 'wrong' type of png ?

I'll investigate !

Rob_Che
05-12-2008, 09:08 AM
Here we go...
http://koivi.com/ie-png-transparency/

PMSL:

The next step a developer will likely take is to go to their favorite search engine and search for "png transparency ie" in hopes of finding a quick fix. (Afterall, if you are a developer, that is likely how you found this page.)

Rob_Che
05-12-2008, 09:27 AM
That makes for interesting reading if you're bored :)

It is strange... If someone would have told me 10 yrs ago that I would be sat here, essentially talking to myself, about how to make a grey box disappear to enhance a user's viewing pleasure I'd have laughed in their face. Impossible to explain to someone in the real world why this excites me :)

d a v e
05-12-2008, 10:33 AM
that doesn't work in my IE6! does it work in yours?

Ricky55
05-12-2008, 11:01 AM
PNG's are read in IE 6 but the transparency is not. IE 7 does and so does Firefox and Safari. Real shame this.

I once did a site that used transparent pngs and it looked awful in IE 6. I remember the client calling me about it saying that his site had these terrible white borders and I was saying no they look fine thats the design and then I figured out what was going on.

Considering IE 6 is still used by over 30% of web users I wouldn't use them.

Can't you use gif?

Rob_Che
05-12-2008, 11:37 AM
Ricky, I wanted to use drop shadows...
I'm gonna try the PHP fix and see where I end up...

that doesn't work in my IE6! does it work in yours?

Do you mean png's in general or have you tried this PHP fix ?

d a v e
05-12-2008, 01:11 PM
i mean the example in the link you gave that's supposed to work :(

are you using a gradient background or why can't you use a gif (or 8-bit png for that matter;) with the drop shadow? can you post a link or image of what you're trying to do? (or of the image and the background)

Rob_Che
05-12-2008, 01:20 PM
Hey Dave;

Not one particular image or site...
I just really want them to work cos they save TONS of hassle.

Here's one I'm currently using: www.doncasterlivemag.co.uk (http://www.doncasterlivemag.co.uk)
And here: http://www.thewrenchmag.com/news.htm

I've used a gif here: www.wireroses.co.uk (http://www.wireroses.co.uk) but would really want a drop shadow...

I've not seen another graphic that can create a smooth drop shadow without ghosting.

m1a2x3x7
05-12-2008, 01:29 PM
use this: http://www.twinhelix.com/css/iepngfix/

Works for me in the most updated IE6.

Rob_Che
05-12-2008, 01:36 PM
Cheers m1a2x3x7...

I will try that this evening...

Cary
05-12-2008, 08:56 PM
that doesn't work in my IE6! does it work in yours?

Yes, but not the image at the top of the page. There's an image further down the page with the fix applied.

Rob_Che, you may also find this interesting:

http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

You can even use png fixes with these types of images to keep the transparent areas visible.

d a v e
05-12-2008, 09:10 PM
cary: yes i know which image you mean but it doesn't work in my ie6 ;)

Rob - those image examples with drop shadows seem ok to me? if you have a fairly uniform background and gif or jpeg doesn't do it for you then how about just a 24 bit png (i.e. without alpha transparency) anti-aliased against the target background?

Rob_Che
05-12-2008, 09:22 PM
if you have a fairly uniform background and gif or jpeg doesn't do it for you then how about just a 24 bit png (i.e. without alpha transparency) anti-aliased against the target background?

I can get certain aspects to work... It's really for, say I'm creating a
header image that may be against different backgrounds... It would be nice not to have to resample it all the time... you dig ?

Am I excluding too large a percebtage if I use them ?
A LOT of newer CSS sites use them tho.

Ricky55
05-15-2008, 05:00 PM
rob did you try this fix? what did you think of it?

I have a use for it thats all, I didn't know this could be done.

Rob_Che
05-16-2008, 05:11 PM
Hey Ricky55 - I have applied it to this page...
http://www.doncasterlivemag.co.uk/

I have IE7 at home tho so no need for it.

Can someone with IE 6 check it for me please ?

Rob

domedia
05-16-2008, 06:47 PM
http://www.doncasterlivemag.co.uk/blank.gif not found

Ricky55
05-16-2008, 07:44 PM
Nice one I'll have a look in ie6.

I do like your work mate, very good.

Rob_Che
05-16-2008, 08:39 PM
Ah bugger... I need to add the images. In a word D'OH !

domedia
05-16-2008, 09:00 PM
Ah bugger... I need to add the images. In a word D'OH !
I can remember doing the exact same thing at least twice ;) Do they even provide the blank.gif?

Rob_Che
05-16-2008, 09:15 PM
Yeah they do... there's a few image files actually tho I think most are for the 'How to' page...

I've added it now. Any joy ?

Ricky55 - Hope it works (and thanks :wink:)

Rob_Che
05-16-2008, 09:49 PM
Hey - I think it works !

Ricky55
05-16-2008, 11:49 PM
What a great little fix.

Opened in IE6 and it looks fine.

What do you upload to get this working then just the iepngfix.htc file?

What does the blank.gif do? and where is this referenced?

Thanks

Ricky55

Rob_Che
05-17-2008, 09:21 AM
EXCELLENT NEWS !

OK... There is one line of CSS:
img, div { behavior: url(iepngfix.htc) }
Obviously ensuring path to the .htc file is correct.

Add blank.gif & the .htc file.
(I just pasted these into my css folder for ease of reference)
In the .htc file itself you need to amend the path to "blank.gif"
(this is what 'replaces' the grey default bg)

And that's it ! That really is an easy fix !

Rob

Ricky55
05-17-2008, 01:22 PM
Nice one mate, it makes life so much easier being able to use PNG's.

Rob_Che
05-17-2008, 02:07 PM
Totally agree...
Cheers for the links everyone.

Rob_Che
05-20-2008, 09:31 AM
This really works. Just checked on our aged IE6 at work (which has minimal updates and service packs) and it works just fine.

Rob_Che
06-05-2008, 09:37 AM
PNGs don't work as repeating backgrounds in IE6...
Even this fix doesn't work.

I've been having problems repeating backgrounds... they don't work in IE6 as PNGs it seems.

There are a few hacks but are massive javascript or flash translations of the image...
I'll stick to gifs I think ;).

Rob_Che
06-05-2008, 09:40 AM
OR...

Can I specify a background image depending on the browser.
I've never used the !IF function.

What I would want to do is have the PNG swap out for a GIF if IE6 is detected.

Can this be done ?

Rob_Che
06-06-2008, 12:52 PM
Changed the BG image to a jpeg and it works fine...
Just thought I'd update this if anyone's listening... ;)

PNG backgrounds don't "perform" in IE6... there you go.