Fig 1.0 Copy the highlighted code into each webpage, of yours, that displays one or more .png image.
| FIX IE6 PNG TRANSPARENCY PROBLEM |
In this section I will show you how to fix the problem that internet explorer 6 has when displaying PNG (Portable Network Graphics) image files. If you are not aware, which you may
not be if you use a web browser other than IE6, IE6 by default displays .png image files with a solid grey-white (dirty white) background instead of a
Transparent (See-Through) background. Although IE7 and IE8 have been created to improve IE, Microsoft still refuse to get rid of IE6. And with IE6 being
the default web browser for Windows XP it means, unless your visitors upgrade to IE7 or IE8, those visitors will see your .png images with a square,
grey-white, background and therefore wonder what is going on. They make think you are not good at website design and leave your website instantly. So
in reality you have to fix the PNG Transparency problem for IE6 and at the same time educate your IE6 visitors, via a screen message for example, that
they should move with the times and changed to IE7 or IE8.
To fix the PNG Transparency problem you first need to download the magic code from http://www.twinhelix.com/css/iepngfix/.
There are two versions of the code available, V1.0 and V2.0, so download them both of them even though in this example I will only use V1.0. When testing
both versions I found V1.0 fixed the problem whereas V2.0 did not completely get rid of the problem. This can happen naturally with updated code - It
depends how the author tested it, how I tested it, whether or not we had differences in our test computers and IE6 versions and so on. Programmers Headache
should be in some kind of dictionary before too long! You see on forums all the time that a "Fix" worked for many people but did nothing for others.
Anyway. Try both and see which one works for you, if any.
Regardless of which version you download, after unzipping each one into their respective folders (i.e. iepngfix and iepngfix_v2) both folders will
contain a file called iepngfix.htc and a file called blank.gif. You can ignore the other test files in each folder because they are for
the author's demo. In this example simply upload the iepngfix.htc file and blank.gif file to your public_html (website) folder and then copy the
following highlighted code into each webpage, of yours, that displays one or more .png image.
Fig 1.0 above represents a standard web page. In the middle of the code I am displaying two .png images. A British Flag (with a link to an index.html file in an ENglish folder) and a French Flag (with a link to an index.html file in the public_html folder). Under IE6, without the code fix, those flags are displayed with a solid grey-white background (Fig 1.1 below) whereas the same web page with the code fix inside it displays the flags correctly with a transparent background.
The above is a small example in terms of the number of .png images and placement but if you imagine ten mixed size .png images positioned randomly on the
web page, each with a solid grey-white background, you would further see why IE6 can make your work look ugly and unprofessional. As said. This does not
happen with IE7 and IE8 because they support .png images (transparency) properly. Other web browsers support .png images (transparency) properly too and
have done so even before IE8 and IE7.
Go back to the code. If you have an IMG tag (command/instruction) inside your HTML code that is within a DIV tag you must include div in the STYLE code,
like I have done. img, div, a, input.....etc. If you put img only you may wonder why the code is not working. It will be because you need to
include div. To play safe keep all of the tags in the STYLE code. That way, regardless if one web page only needs img and another web page only needs
img and div, the code should work for that web page's .png image(s).
All HTM, CSS, PHP and MySQL files in the websitecreationhelp.com folder and its sub-folders are (c) John White, 2009. All Rights Reserved. Email: John