Page 1 of 1
A good png alpha transparent fix for IE6...
Posted: Mon Jan 29, 2007 4:59 pm
by JellyFish
Could I get some opinions on a good Javascript png fix for IE6? Some links maybe? I've been googling for some sources and couldn't find the one I'm looking for...
I'm looking for a piece that I could include in my pages where I don't have to write browser checks every time I write a img tag. And one where the code maybe executes again every time a new .png is loaded.
Hopefully I've expressed my self clearly.
Thanks taking the time to read my post.
Posted: Mon Jan 29, 2007 5:58 pm
by daedalus__
there's an .htc file somewhere that fixes it~!321
Posted: Mon Jan 29, 2007 6:32 pm
by AKA Panama Jack
It's not easy.
What I did was create a plugin for Template Lite that would basically do it all for you.
It's still a pain in the butt.
Place this between your head tags.
Code: Select all
<!--[if IE]>
<link rel="stylesheet" href="iehax_onlyie.css" type="text/css" media="all" charset="utf-8" />
<![endif]-->
<style type="text/css">
<!--
span.iehax { display: none; }
img.iehaxblank { display: none; }
-->
</style>
Then create an iehax_onlyie.css file and place this inside...
Code: Select all
img.iehaxblank { display: inline ! important }
img.iehaximg { display: none ! important }
Then for each image...
Code: Select all
<!--[if IE]>
<span class="iehax"
style="height: 100px;
width: 100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='planetoo1.png',sizingMethod='scale');
display:inline; position:absolute; ">
</span>
<![endif]-->
<img class="iehaxblank" width="100" height="100" src="images/spacer.gif" alt="." border="0"/>
<img class="iehaximg" src="planetoo1.png" alt="" width="100" height="100" border="0"/>
Change the width and height attribites to fit your image size. It does work and like I said it's a pain in the butt to work with. All that extra code just to support a PNG with alpha transparency. Something Microsoft should have fixed many, many years ago.
Posted: Mon Jan 29, 2007 6:51 pm
by JellyFish
It's not easy.

Damn right! Come to find that background pngs are a hopeless case...

I only wish microsoft was more like microsoft rather then microsucks... I guess I'd just have to forget .pngs, maybe use flash.
Posted: Mon Jan 29, 2007 6:55 pm
by Luke
yea you can't really use pngs for background images (well at least pngs with alpha transparency). I use this script when I need to fix the bug for regular images (with width and height attributes).
http://homepage.ntlworld.com/bobosola/
It really is a shame that the corporation who has the biggest influence on our jobs loves to give us the finger.
Posted: Tue Jan 30, 2007 12:24 am
by AKA Panama Jack
If you are using
Template Lite or Smarty you can use the following {insert} tag for your templates.
The following function can be placed anywhere in your code just as long as it is available when the display method is called by the template class. Just make sure you have a standard 1 pixel x 1 pixel transparent spacer.gif in the images directory.
Code: Select all
function insert_img($params, &$tpl) {
$class = (isset($params['class']) ? " class=\"iehax " . $params['class'] . "\" " : " class=\"iehax\" ");
$id = (isset($params['id']) ? " id=\"" . $params['id'] . "\" " : "");
$style = (isset($params['style']) ? " style=\"" . $params['style'] . "\" " : " ");
$border = (isset($params['border']) ? $params['border'] : 0);
$alt = (isset($params['alt']) ? $params['alt'] : "image");
static $firsttime = 0;
$str = '';
if($firsttime == 0)
{
$firsttime = 1;
$str = '
<style type="text/css">
<!--
span.iehax { display: none; }
img.iehaxblank { display: none; }
-->
</style>
<!--[if IE]>
<style type="text/css">
<!--
img.iehaxblank { display: inline ! important }
img.iehaximg { display: none ! important }
-->
</style>
<![endif]-->
';
}
$str .= '
<!--[if IE]>
<span ' . $id . $class . '
style="height: ' . $params['height'] . 'px;
width: ' . $params['width'] . 'px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' .
$params['src'] . '\',sizingMethod=\'scale\');
display:inline; position:absolute; ">
</span>
<![endif]-->
<img class="iehaxblank" width="' . $params['width'] . '" height="' . $params['height'] . '"
src="images/spacer.gif" alt="." border="' . $border . '"/>
<img class="iehaximg" src="' . $params['src'] . '" alt="' . $alt . '"
width="' . $params['width'] . '" height="' . $params['height'] . '" border="' . $border . '"/>';
return $str;
}
Then you can use the following syntax for your PNG images.
Code: Select all
{insert name="img" src="yourimagename.png" width="100" height="100"}
The name argument MUST be img.
Argument List
- src = (Required) The path and image to display. IE: "images/cat.png"
width = (Required) The actual width of the image
height = (Required) The actual height of the image
alt = (Optional) The alt tag information. If missing it will be called "image".
border = (Optional) The border size around the image. Default is 0.
style = (Optional) Any style attributes you would like to assign the image.
id = (Optional) An ID name you would like to assign the image.
class = (Internal) Do not use this argument.
This is just as easy as using
Code: Select all
<img src="yourimagename.png" alt="image" width="100" height="100" border="0">
Just use
Code: Select all
{insert name="img" src="yourimagename.png" width="100" height="100"}
instead of the normal image tag. I am using the above code in 6 different templates for the AATraders Game and it is working flawlessly.
Posted: Tue Jan 30, 2007 12:32 am
by Luke
that's awesome, AKA PJ! I've been meaning to start using template_lite as I've heard only good things. I'm writing a simple press release application right now and I think it would be the perfect project to get my feet wet with template_lite. It uses adodb_lite already

Posted: Tue Jan 30, 2007 12:53 am
by Kieran Huggins
JellyFish wrote:A good png alpha transparent fix for IE6...
Mozilla Firefox
(It had to be said....)
Seriously though:
There's IE7 (the javascript fix, not the browser)
http://dean.edwards.name/IE7/
WebFX:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
and others, Googling will report many more.
I've used both of the above, but preferred the WebFX library for it's smaller footprint.
You can see it in action
here (in ie6, of course).
Posted: Tue Jan 30, 2007 3:37 pm
by daedalus__
This is what I was trying to point out, earlier. As far as I know, it is the least painful method.