Before, I describe the issue, I’ll start off by describing what PNG is:
Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license.
From: http://en.wikipedia.org/wiki/Portable_Network_Graphics
Aside from the “lossless data compression”, I use PNG in some of the images to provide what I call a progressive transparency. PNG, unlike GIF images, allows the creation of images that progressively become transparent. Traditionally, in GIF files, a pixel was either transparent or not transparent. Therefore, if the image contained a gradient going into transparency, you would see the gradient as going into a white space not transparency.
The problem we encounter when using PNG is that MSIE 5.5 and 6.0 do not support transparency with this image type. While these are older versions of MSIE, some computers as well as PDA Phones (ie LG Dare) still ship with this version of the browser and leave it up to the consumer to upgrade.
The issue is described in depth below:
PNG-24 images with alpha transparency display with a solid gray color as the background by default in Windows versions of Microsoft Internet Explorer. This is because MSIE does not natively support the multiple levels of transparency. The browser does however support the alpha-channel transparency through proprietary filters.
From: http://koivi.com/ie-png-transparency/
On the www.arvixe.com homepage and all page footers, the png transparency technology is used to create a very clean mouse-over effect. The original image is simply a 1px by 1px png image (http://www.arvixe.com/images/blank.png) . Then using CSS, the background of this 1×1 image is changed to a desired image on mouse over and mouse out (hover). We used this method to step away from using javascript for the mouse over effect.
So, how to fix this? The website I’ve linked to above provides a php function that solves this. I, however, don’t feel comfortable plugging in 50 lines of php code not written by us.
A simple fix is using the php $_SERVER["HTTP_USER_AGENT"] variable to capture the browser’s version. Then, if the version is MSIE 5.5 or MSIE 6.0 the mouse over effect is taken out. The full if statement is as follows -
//check for bad browsers...
$useragent = $_SERVER["HTTP_USER_AGENT"];
if (preg_match("|MSIE ([5-6].[0-9]{1,2})|",$useragent,$matched)) {
//insert images without the mouse-over effect requiring the transparent png image
} else {
//usual code
}
Another solution would be to simply recreate the image using GIF since it is not using gradual transparency.
Relevant Link: http://www.browsershots.org/ – Allows you to view screenshots of your site on browsers using different resolutions, operating systems, versions, etc.
Shame on you for using- and linking to wiki*dia!
There’s no sane reason not to use 24bit PNG for all layout image needs given the abundance of low cost storage and super broadband. I ignore dialup users: they have no business using the interweb. They’re too cheap for pay for appropriate access ergo they’re unlikely to buy whatever you’re selling.
24bit PNG also provides 8bit transparency vs 1bit transparency of GIF (which is itself limited to 256 colors.. yuck). Animation? Not GIF: use flash until the firefox oligarchy realizes the awesomeness of MNG.
Onto the crux..
We’ve been using sleight.js to enable microsoft’s backwards-, non-standards-compliant web ‘browser’ to function less poorly. Here’s a more recent incarnation:
http://allinthehead.com/retro/289/sleight-update-alpha-png-backgrounds-in-ie
Depending on your interweb needs another fantastic option is to take the opportunity to motivate the unwashed masses to escape from IE tyranny to Firefox freedom via creative mod_rewrite directives. The fewer people suffering with IE on your site the less time you have to WASTE catering to cretins.