Create Transparent PNGs in IE6 Using AlphaImageLoader & No Hacks

.abelafonte — Thu, 01 Nov 2007 04:16:09 +0000

As promised, this article describes how to use transparent PNGs in your CSS design in a very clean way. This method simply uses the default cascade and inheritance instead of the CSS hack for transparency described in my previous article on the subject.

As in our previous example of old-school CSS for transparency, we start with our basic background image that includes alpha transparency.

#truck {
	width: 470px;
	height: 294px;
	background: url(images/mater.png) no-repeat left top;

}

And, as expected, it shows up with a crummy blue haze in IE 6. (Which we won’t show here…)

Last time, we isolated which version we wanted to deliver to Internet Explorer by using the parent > child selectors of CSS and a hack that only IE would recognize.

The Clean Solution
This go-round, we will take it up a notch. Start by defining an IE-only stylesheet. Personally, I always have one of these (and another for IE7) at the start of a project. It’s good practice because there will always be little hiccups in IE that you can address easily by serving it a separate CSS file.

So, create a CSS document called stylesIE6.css or something to that effect.

Now, let’s link to that stylesheet using IE’s conditional comments. So, in the head of your document AFTER your existing stylesheet, enter

*Please note: WordPress is adding a space before the exclamation point and ‘endif’. There should be no space there in your code.

This code reads: ‘If less than or equal to IE6, then use this stylesheet’. Remember, that all previously defined styles our primary stylesheet will apply to our document. (You can view all of the possible conditional statements at MSDN). In this stylesheet, we simply want to define the things that we want to change. My IE stylesheets usually contain only a few lines of code.

Next, in your stylesIE6.css stylesheet add the transparent graphic on our #truck element using Microsoft’s AlphaImageLoader filter that we used before.

#truck {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

At this point, there are two things that you should notice:
One – We did not have to specify our width and height in the IE-only stylesheet because the #truck element will inherit those settings from the main style sheet.
Two – The #truck element will also inherit the original PNG graphic from our original style sheet. Now, we see two trucks, one of which we don’t want.

Solve this by adding the background property to your IE stylesheet to override the display of the original graphic. Our IE stylesheet wins in specificity because we placed it BELOW our original stylesheet in the source code.

#truck {
	background: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

Now, we should have the same transparent png graphic in IE as we do in all other browsers without relying on hacks. Using this method to isolate browser-specific CSS gives you the most control and keeps you from having to make changes in the future if a browser update renders your hack useless.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN
Find out more about IE Conditional Comments at MSDN

Transparent PNG in IE6 with CSS Hacks and AlphaImageLoader

.abelafonte — Sun, 16 Sep 2007 21:17:11 +0000

This entry describes a method for displaying a transparent PNG in IE6 using a technique that I actually don’t use anymore. I just wanted you all to be aware of your options when it comes to getting the desired results. You can find the preferred, hack-free method here.

This is an example of isolating browsers using hacks, or exploiting the deficiencies in some browsers. Understand that browser targeting is not limited to transparent PNG and can be used for anything that you want to do only in certain browsers.

We start by defining the code for our awesome transparent graphic. Nothing special here… business as usual. If you view this in IE6, it will have a translucent blue box around the image in all the transparent areas.

#logo {
	background: url(images/logo.png) no-repeat left top;
}

Then we would add the parent-child selector.
In this example, the immediate parent element to the ‘logo’ is the ‘header’ element. So, we use the ‘greater than’ symbol separated by spaces to say: for element ‘logo’ that is a direct child to ‘header’, do this. IE6 and below don’t understand parent-child selectors, and skip right over them. So, we have effectively hidden this entire CSS rule from those browsers.

#header > #logo { /* FOR ALL BUT IE */
	background: url(images/logo.png) no-repeat left top;
}

Next, we would follow that with an IE-specific hack.
As it turns out, IE5.5 and IE6 think that it’s possible have an element above the HTML element. Fortunately, all other browsers on the planet know better, so they skip the next rule because it says: For all elements (*) with this selector path starting above the HTML element, do this.

And this is where we’d add our IE-specific alpha transparency filter.

* HTML #logo {/* PNG Alpha IE Win ONLY */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='scale');
}

What we’ve done here is display a transparent PNG natively in all browsers except for IE6, and displayed the same graphic via a proprietary alpha filter only in IE6.

For most of you who have been doing CSS for a while, this is nothing new. I’m only doing this as a precursor to the cleaner way that I want to introduce you to shortly. So, stay tuned.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN

transparent png – Belafonte Code

Create Transparent PNGs in IE6 Using AlphaImageLoader & No Hacks

Notes:

Transparent PNG in IE6 with CSS Hacks and AlphaImageLoader

Notes: