www.pokeroconnor.com

IE PNG Fix

April17

A very convenient way to deal with I.E 6 png transparency issues, is to use TwinHelix’s IE PNG Fix. Its convenient as in, once you apply it to your css file(s), you don’t necessarily need to do anything each time you use a png file. 

So the first thing is to download it. Once done , there are good instructions in the ‘iepngfix.html’ file. An extract is shown here, fyi…

How To Use

Follow these simple steps to add this to your page:

  1. Copy and paste iepngfix.htc and blank.gif into
    your website folder.
  2. Copy and paste this into your website’s CSS or HTML:


    <style type="text/css">
    img, div { behavior: url(iepngfix.htc) }
    </style>

    That CSS selector must include the tags/elements on which you want PNG
    support — basically, give it a comma-separated list of tags you use.
    It must also include the correct path to the .HTC relative to the HTML
    document location
    (not relative to the CSS document!). For instance,
    yours may look like this:


    <style type="text/css">
    img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
    </style>

  3. If your site uses subfolders, open the .HTC file in a text editor like
    Windows Notepad and change the blankImg variable to include
    a correct path to blank.gif like so:


    var blankImg = '/images/blank.gif';

    Again the path is relative to the HTML file.
    Otherwise, you will see a “broken image” graphic!

  4. Sit back and enjoy!
//
posted under css | No Comments »