IE CSS rollover with transparent PNGs?

[jonnymorris]

Hi!

Much to my utter disgust and hatred for IE, I would like to know how the blazes I am supposed to get transparent PNGs to rollover using CSS in IE. Works fine in Safari and Firefox.

My site:
http://www.jonathanmortimer.co.uk/test2

Note that this site is liable to change, break, etc as I try out new things (I have to upload to test in IE as I am running Winslows XP in Q on my Mac and the OS X - Windows networking thing seems to be broken for XP).

I have tried the PNGfix at http://homepage.ntlworld.com/bobosola/ but can't get it to work with a CSS rollover, I think it assumes I am using a javascript rollover.

[AndrewChip]

I use a simple hack found here:

http://www.twinhelix.com/css/iepngfix/

It's worked on everything I've needed png's for

[welshstew]

what version of IE are you using? If using IE6 then you will need to apply the alpha channel transparency fix

you can also have a look at this article from a list apart:
http://www.alistapart.com/stories/pngopacity/
Check out example 2: anti-aliased translucent nav with rollovers

you can also try twin helix's png fix: http://www.twinhelix.com/css/iepngfix/

you can also have a look at this tutortial:
http://www.remotesynthesis.com/blog/...ollovers-in-IE

[jonnymorris]

Sorry, tried all those things and none of them worked. Followed them to the letter.

I've had it with IE. I'm not going to be Microsoft's lapdog like the rest, millions of people CAN be wrong. We all know IE and Windows are the worst pieces of software ever written. I made my effort by following the official W3C standards and that's good enough for me.

Thanks for the responses though

[welshstew]

ha ha ha, totally agree with you, but unfortunately it still has too big a market share to really discount it

http://www.w3schools.com/browsers/browsers_stats.asp

If you leave it then it will be your end users that will suffer not MS, so it may be worth spending a bit longer trying to fix.

can you post a link so we can take a look?

[jonnymorris]

Originally Posted by welshstew

ha ha ha, totally agree with you, but unfortunately it still has too big a market share to really discount it

http://www.w3schools.com/browsers/browsers_stats.asp

If you leave it then it will be your end users that will suffer not MS, so it may be worth spending a bit longer trying to fix.

can you post a link so we can take a look?

Yeah, sorry, it just makes me so angry! However, if more people stopped using IE then Microsoft might just stop making it.

http://www.jonathanmortimer.co.uk/test2

Basically I can't be bothered fiddling and cussing over it any more just for the sake of IE, however if someone is feeling kind enough to fix my code to make it IE friendly then I'm all for that, then I can fix the rest myself.

[welshstew]

hhhmmm,

this only seems to be an issue with ie6.

so you have two options.

either try the alpha channel transparency fix again and see if this works

or use a ie6 specific stylesheet (http://www.quirksmode.org/css/condcom.html) and render gifs for ie6 users rather than pngs.

good luck

[Aso]

or use a ie6 specific stylesheet (http://www.quirksmode.org/css/condcom.html) and render gifs for ie6 users rather than pngs.

In fact, you might as well use gif's anyway. You really don't need alpha transparency in this situation (and if you use a white matt, you won't tell the difference).

[moojoo]

I would serve up the gif images to IE 6 users personally and mayhaps use a conditional just telling them that it would look better in IE 7 or something. Kinda crappy but this day in age any one hanging onto IE 6 deserves what they get imo. I still support it but I won't spend an hour or so attaching a png hack to every png file for one browser. </bitter rant> gege

[jonnymorris]

Originally Posted by aso186

In fact, you might as well use gif's anyway. You really don't need alpha transparency in this situation (and if you use a white matt, you won't tell the difference).

Thing is, imo, GIF is pretty much yesterday's image format (although I know it has been updated through the years, and is still useful for animated images). I use Inkscape for my graphics and the bitmap output format for that is PNG, a much more modern and flexible image format than GIF, and one which also follows my philosophy for this site of using 100% free and opensource tools and file formats.

I can just use the white matt with PNG, as I am doing as I write this, as a temporary fix. With transparency there may be further scope for cool tricks as I learn new stuff

[jonnymorris]

Originally Posted by moojoo

... any one hanging onto IE 6 deserves what they get imo. I still support it but I won't spend an hour or so attaching a png hack to every png file for one browser. </bitter rant> gege

I'm with you all the way on that one! Problem is that I bet IE 7 requires Win XP and probably DX10, there are plenty of people out there still on 2000 and even 98 (although admittedly I don't care if these people can't view this particular website as it's not aimed at them). Stupid Microsoft with their crappy "new technobollocks" that requires x number of other upgrades and updates to work properly

Actually, my portfolio site is aimed at people who use an Apple Mac, as it's aimed at getting me a job in the creative industry at a company who uses them (I hate PCs!)