Home > .net 3.5, AJAX, c#, HTML, JavaScript, Microsoft, Standards, Windows XP > Implementing IEPNGFix as a Reusable Control

Implementing IEPNGFix as a Reusable Control

January 30, 2009

Even with IE 8.0 on the horizon, a great deal of our internal users are still using IE 5.5 and 6.0.  While, for the most part, our current coding techniques are unaffected, we did move to using PNG files quite a while ago and are faced with rendering issues as the target audience for a few of our produces expands.

To solve those issues, I’ve been using TwinHelix’s IE PNG Fix behavior with a great deal of success; however, I dislike keeping track of multiple files and references between projects.  It made more sense to make it a reusable control and include it in our shared architecture library.  When Angus releases a new implementation, then I only need to update the control and push out the updated libraries rather than touching HTML in each project.

Here’s how:

1. Download the latest version of IE PNG Fix from here.

2. Add the IEPngFix.htc, blank.gif, and IEPngFix_tilebg.js (if using 2.0 Alpha 3) into your project.  Mark all three files as Embedded Content.

3. Create a basic CSS file that can be added to pages and call the IEPngFix behavior.  Use the full path to the Web Resource (we’ll add those in the next step).  It’s sensitive to the namespace of your project.

img, div, .pngfix, input {

    behavior: url(‘<%=WebResource(“Resources.IEPngFix.htc”)%>’);

}

3. Modify the Properties/AssemblyInfo.cs file and add the approprate Web References.

[assembly: WebResource(“Resources.IEPngFix.css”, “text/css”,

       PerformSubstitution = true)]

[assembly: WebResource(“Resources.IEPngFix.htc”, “text/x-component”,

       PerformSubstitution = true)]

[assembly: WebResource(“Resources.IEPngFix_blank.gif”, “image/gif”)]

[assembly: WebResource(“Resources.IEPngFix_tilebg.js”, “text/javascript”)]

Notice that the HTC behavior file is an “x-component”.  For a full list of MIME references, check out the w3schools.com.  Also, perform substitution allows us to use dynamic calls of resources—within resources, such as in our CSS file.

4. Create a new class that inherits from CompositeControl.  This control will add the javascript and CSS references into our projects.  Override the OnPreRender method and populate the calling Page’s header with the links to our two files.

protected override void OnPreRender(EventArgs e)

{

       // Base Code: http://www.twinhelix.com/css/iepngfix/

       // Include JavaScript for tiled background support.

       string javascriptInclude =

              Page.ClientScript.GetWebResourceUrl(GetType(),

             “Resources.IEPngFix_tilebg.js”);

           

       var jsLink = new HtmlLink

              {

                     Href = javascriptInclude

              };

       jsLink.Attributes.Add(“type”, “text/javascript”);

       Page.Header.Controls.Add(jsLink);

           

       // Include Css file that calls HTC.

       string cssInclude =

              Page.ClientScript.GetWebResourceUrl(GetType(),

             “Resources.IEPngFix.css”);

           

       var cssLink = new HtmlLink

              {

                     Href = cssInclude

              };

       cssLink.Attributes.Add(“rel”, “stylesheet”);

       cssLink.Attributes.Add(“type”, “text/css”);

       Page.Header.Controls.Add(cssLink);

 

       base.OnPreRender(e);

}

That’s it.  Build and add the new control to your project.  You can then add a new forms page and drop the control into the page.  I prefer, however, to keep a “DefaultPage” and inherit my pages from it—add once, apply to all.🙂

protected void Page_Load(object sender, EventArgs e)

{

       Page.Controls.Add(new IEPngFix());

}

Here we can see the rendered control. The PNG has a transparent background and without IEPngFix shows up as a white box rather than seeing the black background of the page.  Works like a champ!

IEPngFix in Action

Thanks again to Angus Turnbull for this excellent behavior!

Tags: , , , ,
  1. June 12, 2009 at 1:32 pm

    It works only for static png images, not for the dynamically loaded images via ajax call.

    Here is the simple solution for this: IE6 png alpha transparency fix for dynamically loaded images via ajax

  2. June 12, 2009 at 1:35 pm
  3. mailtoanzer
    July 20, 2009 at 11:43 pm

    Hi
    Do you have a downloadable version of the control/source available?

    • July 23, 2009 at 7:44 am

      No, not anymore… sorry.😦

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: