IE8 bug I submitted has been resolved

One of the IE8 bugs I recently submitted via Connect has been resolved. It involves the use of the url() value for the content CSS property when using CSS content generation. You can see details of the bug on Connect here.

Advertisements

ReMIX08 Australia Welcome to Internet Explorer 8 session content

Thanks to all those who attended my and Lachlan’s session on IE8 at ReMIX in Sydney and Melbourne. We hope you got something out of it. You can download the deck and demo from the session below.


IE8 beta 1 browser version targeting and ASP.NET Themes

You might find that when you add the meta tag required to force IE8 beta 1 into IE7 (or 6) rendering mode into your ASP.NET page (or Master Page) that it doesn’t work as expected…. IE8 continues to render the site in full standards mode. The reason might be that in beta 1 of IE8 the “X-UA-Compatible” meta tag must be the first element in the page head element and by default ASP.NET will insert the link tags to the CSS files in your theme at the beginning of the head element of your page (or Master Page), before any other elements that might actually be defined in the .aspx or .master file.

To fix this, add the following code to the page’s (or Master Page’s) PreRender event handler (Page_PreRender):

// Move browser tageting meta tag to top of header
HtmlMeta meta = null;
int metaXUACompatIndex = -1;
foreach (Control ctl in page.Header.Controls)
{
    meta = ctl as HtmlMeta;
    if (meta == null)
        continue;

    if (meta.HttpEquiv == "X-UA-Compatible")
    {
        // Grab index
        metaXUACompatIndex = page.Header.Controls.IndexOf(meta);
        break;
    }
}
if (metaXUACompatIndex > 0)
{
    HtmlMeta metaXUACompat = page.Header.Controls[metaXUACompatIndex] as HtmlMeta;
    page.Header.Controls.RemoveAt(metaXUACompatIndex);
    page.Header.Controls.AddAt(0, metaXUACompat);
}

This will move the browser targeting meta tag to the top of the list so that IE8 will honour it.


Getting Internet Explorer 6 to render transparent PNGs with minimal fuss

So you’re creating a great looking website and embracing the latest techniques like transparent PNG images to get good looking effects. Everything looks great in IE7 and Firefox but then you fire it up in IE6. Oh no!! What are all these gray backgrounds in my transparent PNGs? Well IE6 doesn’t support transparent PNGs as simply as other browsers but it does support them with a little tweaking.

You can make IE6 render transparent PNGs just fine using the a combination of two of IE’s proprietary features: DirectX Filters and DHTML Behaviors. Filters allow IE to apply all types of visual effects to HTML, pretty pointless usually when creating “standards” compliant websites but one filter in particular is useful in our situation; AlphaImageLoader. This filter will load an image, including a transparent PNG, into the element between the background and the content and even resize the element to fit the image in (there are other options to clip the image but we want the default behaviour). Great, now all we need is a way to do this easily for any PNG image in our site, and only in IE6. That’s where DHTML Behaviors come in.

A behavior is basically a javascript file that encapsulates DHTML manipulating code so that it can be re-used. You can attach to any event on the element the behavior is applied to and run the script when the event is fired. The really good bit is that DHTML Behaviors are applied by CSS rules so we can include them in our standard site stylesheet. Perfect!

Create a blank transparent GIF image 16 x 16 pixels in size and call it blank.gif and place it in the Images folder of your website.

Then create a file in your website called PNGImage.htc and paste the following code into it (or get it from the link at end of this post):

<public:attach onevent="RenderPNG();" event="oncontentready"> <script language="javascript" type="text/javascript"> function RenderPNG() { var img = element; var src; // check that behavior hasn't already been applied if (img.tagName.toLowerCase() == "img" && img.style.filter.indexOf("AlphaImageLoader") < 0 && img.src.toLowerCase().indexOf(".png") > 0) { src = img.src; img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + src + "\')"; img.src = "Images/blank.gif"; } } </script>

This behavior will be attached to our IMG tags. As you can see the behavior attaches to the element’s oncontentready event. When the event is raised once the element is ready for scripting, the behavior check’s to see if it has already been applied to this element, and if not, applies the filter and sets the element’s src property to a transparent gif file. This way the IMG tag still contains a vaild image so will honour its normal rendering duties but now has the transparent PNG image loaded into it behind the transparent GIF.

Now, in your site’s stylesheet file add this class descriptor:

IMG.PNGImage { _behavior: url('PNGImage.htc'); /* IE6 Only */ }

This will cause the behavior to be loaded for any IMG tag with its class set to include PNGImage. The underscore at the beginning of the behavior property makes it invisible to IE7 which ignores CSS properties prefixed with underscores, as will all other browsers. Make sure the path to the .htc file is relative to the page the class is applied to, not the CSS file itself which is usually the case for urls in stylesheets, such as for loading background images.

Now in your HTML assign the PNGImage class to any IMG tag with a PNG file:

<img alt="A transparent icon" src="Images/my-icon.png" class="PNGImage" />

And that’s it! If you wanted to, you could attach the behavior directly to the IMG element via an element descriptor in your stylesheet, saving you adding the class to each IMG tag, but this will obviously result in a few more CPU cycles being chewed up on the client in IE6 when loading pages:

IMG { _behavior: url('PNGImage.htc'); /* IE6 Only */ }

Files: