PNG 24 overlay in IE 6

[deadgoodundies]

Tweet

Can anyone help or offer some advice on this problem we are having

Im trying to add a "flag" using CSS overlays so that we mark up for customer which items are new, which are existing stock but with new colours etc.

for example if you look at the sloggi underwear here
Sloggi mens underwear

You will see some that have the "new" in with the picture , which is a pain in the rear to keep changing when something has been classed as not new

Now I know we can just do this with a .gif and that would be the easy way but i'd like to use PNG 24 as i can achieve a nice drop shadow with it.

Problem is that IE 5.5 and 6 don't render PNG's properly so does anyone know of a workaround that would work

[scifind]

Hi Adam
Try this
IE PNG Fix - TwinHelix
I have used it before - ping me on skype if you need a hand

[deadgoodundies]

Cheers,
I'll pass that on to the people who are doing the modification

[pete_coles]

If your not too bothered about validation in IE 6 you can use the alphaloader which is better in my opinion than a javascript solution if you only need to apply transparency to one or a few elements.

In your IE6 specific stylesheet add this to the element (I'm assuming its a div):

div.your_element {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='full url to the png file', sizingMethod=crop');
zoom:1;/*Dirty hasLayout hack for IE 6*/
background:transparent;
}

Hope that is helpful

[deadgoodundies]

Ok thanks for the replies.
We got our developers to implement the method that scifind suggested BUT there is a problem.

It seems that the PNG is loading before the thumbnail it's overlayed on so initially there is a brief period where the grey border is still visible and also once it's loaded if you roll your cursor over it the thumbnail disappears totally.
The developers we use (x-cart/ the same people who built the ecommerce software) say that this can't be fixed but they can just disable the corner overlays for IE 6 users, which kind of defeats the object of it.
If anyone has IE 5.5 or IE 6 installed you can see what I mean by going here
Men's mini micro midi tanga and bikini briefs
2nd and third thumbnail across have the PNG applied.

Anyone got any ideas or are the developers right it can't be fixed.

[kolli-tosg]

Evening,

I dug out my old browsers and had a look:

IE5.5 SP2 (5.51.4807.2300) - no PNG overlay, screenshot attached.
IE6 SP1 (6.0.2800.1106) - test page and live site crash browser.
IE7 (7.0.5730.11IS) - the thumbnails don't vanish when you rollover, but the cursor icon doesn't change (on the to with the PNG overlays, fine on the others)
FF2 Gecko/20071025 Firefox/2.0.0.9 - no problems (lovely Firefox!)

The two older versions of IE are standalones, so they behave exactly the same way as an installed browser.

Hope that helps,
Matt

[deadgoodundies]

OK cheers for the info.
We've got IE 6 installed on one of the PC in the office just for testing purposes which it shows the PNG's but thumbnails go when rolled over so not sure why it crashed your browser.
I might have to just bite the bullet and use gifs instead or just hide the feature from IE5 and 6 users (only 5% of our visitors are using those anyway)

[kolli-tosg]

Have you tried reapplying the background image with a:hover?

[deadgoodundies]

No idea as im not doing the work personally but i'll pose the question to the developers

[deadgoodundies]

Got it sorted now, thanks for everyones help
This modification will certainly make my life a lot easier