Displaying PNG 24-bit Alpha Transparency on IE with CSS

10 01 2006

After reading Justin Koivisto’s great article: Normal Display of PNG Alpha Transparency with MSIE and reading his PHP code, I said to myself: “myself, there should be a much simpler (lazy, if you will :D ) way to accomplish this”. True, I could just copy, paste and use his code, modify the .htaccess file (or add the MIME type to the Apache server) but still… :P

Another approach is Bob Osola’s JavaScript script (this is pretty cool too) found in his article: The PNG problem in Windows Internet Explorer.

Personally, I wouldn’t use more than 2 or 3 images on a page, so I believe the use of CSS will do.

I have an example where you can see the results (please see the page source to see the code). The drawback of this approach (as it is written right now – using the background-image property) is that no image(s) will be displayed if the user has CSS disabled.

Again, if you will have lots of .png images and don’t want to have a bunch of CSS classes, you’re better off using Koivisto’s or Osola’s approach.

CSS Compatibility

  • Firefox 1.5 (Win XP and Linux)
  • Internet Explorer 6 (duh!)
  • Opera 8.51
  • Konqueror 3.5.0

I don’t have Safari but my guess is that it will work :D

Enjoy!



Hiatus

4 01 2006

I haven’t been able to update this blog for quiet some time due to some projects I’ve been working on.

I do have a couple of articles I want to post. One of them is how to parse XML strings in Firefox and IE. This is something that took me some hours to figure out because even though there are some tutorials out there explaining how to do this, they didn’t really work for me – and probably I’m not the only one who had this ‘problem’. So, I hope someone will find it useful.

Additionally, I will be posting articles on PHP and MySQL as well… not just JavaScript and CSS stuff ;)

Finally, I would like to share with you something that my C++ teacher used to tell us:

“Remember, in programming there is always more than one way to accomplish something; the more efficient, the better”.

Happy New Year!






LiveSTRONG