Taking on PNG files in IE

PNG (Portable Network Graphics) files are great – the lovely little graphic file format that allows for a gradation from full colour to transparency within a graphic. It’s a handy little tool in your kit to help you translate a designer’s vision into a web page.

Well, handy in some browsers. In other browsers it’s more of a “hmmmm, how does this work?” kind of thing. Those “other browsers” being IE6 and IE5.5.

Not being averse to the odd “hmmmm” moment I’ve been trying to use PNGs where relevant, sometimes more successfully than others. But I thought I’d share one of my successes here to hopefully show that it can be done, and relatively painlessly too!

I’ve used PNGs for the main navigation of this site so I’ll use that as an example.

Our designer wanted to be able to change the background without it affecting the tabs at all. So GIFs were out as they’d leave that pixellated line of colour around the edges where you’d chosen to make the background transparent. All right if the background colour remains the same but obviously not okay in this situation.
Our designer wanted to be able to change the background without it affecting the tabs at all. So GIFs were out as they’d leave that pixellated line of colour around the edges where you’d chosen to make the background transparent. All right if the background colour remains the same but obviously not okay in this situation.

So PNGs it was – and all was fine and dandy in Firefox, Safari, Opera and IE7 but not so happy in IE6 and IE5.5. They PNGs are visible but filled with grey where the transparency should be.

In IE though we can make use of some proprietary filter properties to force them to render with the transparency intact, specifically we can use the AlphaImageLoader filter.

Before that though I had to decide how to create these tab shapes using CSS – I decided I wanted to use background images for the tabs, and I also wanted those tabs to grow seamlessly as the text was resized. So my first thought was that I’d need a left and right-hand graphic to make up the tab shape.

(Left shape) (Right shape)

(I made them both 150px tall and the right tab 250px wide so that as the font size grew, forcing it’s containing space to grow, more of the background image would be revealed).

The HTML looked something like this:

<ul>
<li><a href=”#”><span>Blogs</span></a></li>
<li><a href=”#”><span>Contact</span></a></li>
</ul>

the CSS for browsers that handle PNGs:

ul {float:left; list-style-type:none;}
li {float:left; margin:0 5px 0 0;}
li a {float:left; padding:0 0 0 12px; background:transparent url(i/tabOffLeft.png) top left no-repeat; color:#fff;}
li a span {display:block; float:left; padding:8px 0 5px 0; background:transparent url(i/tabOffRight.png) top right no-repeat;}

and the CSS for IE6 and IE5.5 (delivered only to these browsers using conditional comments):

li a {background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=”/wp-content/themes/mbm/i/tabOffLeft.png”, sizingMethod=”crop”);}
li a span {background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=”/wp-content/themes/mbm/i/tabOffRight.png”, sizingMethod=”crop”);}

Note how you remove the background image and replace it with the AlphaImageLoader filter. Also note the path to the image file in the filter – it doesn’t take the CSS file as it’s relative position, it takes the HTML file. So you should be able to path to the image relative to the HTML file or path from the root of the site as I’m doing here.

At this stage I ran into my first issue. There’s no way to position the filter like you can with a background image. It will always be positioned from the top left corner of its containing space. This was fine for the left-hand shape but no good for the right-hand one. I was positioning the background image to the right of that space so when the font was resized more of the shape was revealed from the left.

So, my fix (that I’m not entirely happy with) was to add in an empty span tag after the initial one. I could then put the right-hand shape in that span tag and style it to be the same size as the graphic. The initial span tag could then take either a repeated background gif or a background colour – and when the font was resized it would grow happily as well.

So the HTML now looks like this:

<ul>
<li><a href=”#”><span>Blogs</span><span class=”tabRight”> </span></a></li>
<li><a href=”#”><span>Contact</span><span class=”tabRight”> </span></a></li>
</ul>

the CSS for browsers supporting PNGs:

ul {float:left; list-style-type:none;}
li {float:left; margin:0 5px 0 0;}
li a {float:left; padding:0 0 0 12px; background:transparent url(i/tabOffLeft.png) top left no-repeat; color:#fff;}
li a span {display:block; float:left; padding:8px 0 5px 0; background-color:#484C57;}
li a span.tabRight {width:12px; background:transparent url(i/tabOffRight.png) top right no-repeat;}

and the CSS for IE6 and IE5.5:

li a {background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=”/wp-content/themes/mbm/i/tabOffLeft.png”, sizingMethod=”crop”);}
li a span.tabRight {background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=”/wp-content/themes/mbm/i/tabOffRight.png”, sizingMethod=”crop”);}

That now works happily across the browsers! When you resize the font the tabs grow as well without breaking or losing their shape.
However, the compromise is that I’ve introduced meaningless markup into the HTML – it’s there purely for presentational purposes and this is a bit of a no-no when you’re trying to adhere to semantic markup. At the moment though it’s the best compromise I could come up with. I am still pondering other ways of doing it… and I’m open to any suggestions here!!

One last thing on the joys of PNGs, (almost done here – I promise), PNGs do something called gamma correction. Now I’m not an expert on this but to sum it up I’d say it’s where the colour of the PNG is corrected to render according to the platform it’s on. As GIFs, JPEGs and CSS background colours don’t do this you can end up with mismatched colours when combining these on a web page. And that is across the browsers, not just on IE.

To fix this help is at hand in the form of a handy little tool (for Windows only) called TweakPNG by Jason Summers. Just download the tool and use it to open your PNG file. You can then delete the gamma information that is displayed (Edit > Delete).

Now you really should be done and have lovely little rounded tabs made with PNGs!