Fixing Transparent Images In Internet Explorer

Michael Lankton | Dec 13, 2007 | View Comments


NO IE!As a website proprietor I want everyone to come to my site. First of all the traffic validates my labor, and second I hope to make some income. A lot of time is spent on design. We want people to find our websites intuitive to navigate and easy on the eye. Once we are satisfied with the design, we may or may not care that all of our visitors are getting the same experience. We should, and I think most of us do take a look at the finished site to make sure it looks proper in a variety of web browsers.

My preference is for Mozilla-based browsers, but KHTML-based browsers (Konqueror, Safari, OmniWeb) and Opera are also excellent choices. There’s no denying that Internet Explorer is still a big player in the web browser business. Since my site’s inception on August 5th of this year, 46% of my visitors have surfed in on Internet Explorer.

So, I thought that I had my site’s behavior nailed down to perform the same regardless of web browser. That was, until two weeks ago when I discovered another hoop that Microsoft was going to make me jump through to get my site to work as intended in Internet Explorer.

The hurdle was that Internet Explorer prior to IE7 did not support transparency in images. This is an issue for me, because I use a transparent PNG in my header graphic. I use an obscure font for my logo, so I can’t just slap my name up in HTML, I have to whip it up in Photoshop as a transparent PNG that lays on top of my header. That logo is my brand. I need everyone to see it the same, regardless which OS or web browser they are using.

I’m a Mac user at home, and at work we are 100% Firefox, so I hadn’t noticed that my logo was a big, gray splotch on the header for IE users. My first reaction was that’s what they deserved for using a crappy web browser, but then reality sank in and I realized nearly half of my visitors saw an unfinished-looking header perched atop my pages. Unacceptable.

IE7 now supports transparency, but there are still a lot of IE6 users surfing out there. The answer? I found that someone had already done the work for me and written a javascript workaround that allowed IE6 to display transparent images. The solution is to embed this script in your pages if you have any transparent images on your site. If you’re feeling particularly clever you can save the script as pngfix.php and add this single line to your header:

<?php include_once “pngfix.php” ?>

The end result? Your web page is a couple kilobytes larger and IE6 will now display your transparent images as you intend them to appear.


Read Related Posts

  1. What Do You Think Of Internet Explorer 7 Beta 2 Preview? What Do You Think Of Internet Explorer 7 Beta 2 Preview?
  2. Download Internet Explorer 7 Download Internet Explorer 7
  3. Apple: Safari Is Now Available To Windows Users Also Apple: Safari Is Now Available To Windows Users Also
  4. Wanted: New Logo For Connected Internet Wanted: New Logo For Connected Internet
  5. Is The Internet's Economic Model Sustainable? Is The Internet’s Economic Model Sustainable?



««
»»

Latest Posts

Filed Under: Blogging • Tools & Tips • Web Design

Tags: • •

About the Author: Have you been a bass player in a hardcore punk band? Built stroker Harleys? Have you been in a fight this month? Written an article about SEO that somehow managed to turn into a social commentary editorial?Mike has.Since 2007 Mike has been sharing his unique worldview with Connected Internet readers. Stop back to see what Mike is thinking about next week.

  • Ooops, I forgot to mention, the above example is something that keeps the script from loading on non-IE 6 and below browsers. A more elegant solution than calling the script for everyone.
  • something like:


    ###<!--[if lte IE 7]>
    ### <script src="http://yoursite.com/templates/Default/js/pngfix.js" type="text/javascript"></script>
    ###<![endif]-->

    The script can be anywhere in your public_html dir, just point toward the correct url when referencing the script.
  • Ieva
    Hi, I'm trying to make this work, but I'm having some problems with it. Where exactly do I write  <?php include_once “pngfix.php” ?> Do I put it after <head> on the top of my code? And also where do I save pngfix.js file? Do I just save it in my Script folder or with all the html documents? Thank you so much
  • Maybe we need to lighten up our link color a little, Everton?

    The link is in the article, but hard to see:
    http://www.connectedinternet.co.uk/wp-content/u...

    Read mlankton's latest blog post....On Hiatus>>>
  • mango
    where can i download/copy this script you mentioned?
  • Lori'
    Thanks so much! The code worked for my logo. I really appreciate it!
  • There is an excellent article and a working fix available that is standards compliant at: 24ways.org.

    For page load and image file size, in many instances, transparent .gifs are better. Thank God updated browsers are supporting ping use.
  • 2 Smackall:

    Try applying that class I've written above to a transparent pixel .GIF stretched to the size of inserted .PNG image, so you'll have something like:

    <img src="pixel.gif" class="someBox" alt="" border="0" />

    Just don't forget to specify width & height either in CSS or directly inside IMG tag :) Should work, I've just tested it to be sure ;)
  • Links with an image in it doesnt work at all... I now started hating IE after loosing much hair for it...
  • @Hairgel_Addict

    love your code... it works fine... But damn it took off all links in my site with IE, any version.

    I am not able to click any links on my site from any IE.
blog comments powered by Disqus