Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery (part 2 of 2)

Brian Dillard, Wednesday, April 9, 2008 @ 5:45 am

For the recent redesign of the Pathfinder web site, we made extensive use of transparent PNGs to layer rounded corners and other curvy shapes on top of a non-contiguous background that mixes a black-and-gray gradient with a wallpaper-style repeating logo. Transparent PNGs are the only way to achieve this visual effect using semantic, standards-based markup and CSS - but IE6 doesn't support PNG alpha-channel transparency.

Yesterday, in Part 1 of this piece, we showed you how to install Angus Turnbull's IE PNG Fix on your server to correct this IE6 shortcoming. Today, we'll show how to overcome one use case not covered by Turnbull's script using a couple lines of CSS and JavaScript.

As we explained yesterday:

There is, however, one drawback to Turnbull's script: It can't account for PNG background images with a background-position other than top left. It will restore the alpha-channel transparency to such images, but it will reposition them to top left, potentially making your designs look even worse than they would have with an ugly gray halo where the transparency should be.

Where Pathfinder ran into trouble

Most of the alpha-transparent PNGs on the new Pathfinder site were covered by IE PNG Fix. The exception proved to be the rounded corners at the bottoms of our sidebar modules. These corners were implemented as bottom-aligned background images:

/*
	background image for normal (grey) sidebar modules
*/
#content #rail .railBlock {
	width: 282px;
	background: url(/sites/pfd/img/chrome/blue/railB.png) bottom no-repeat;
	padding: 0 0 20px 0;
}
/*
	different background image for highlighted (blue) sidebar modules
*/
#content #rail .railBlock.highlight{
	background-image: url(/sites/pfd/img/chrome/blue/railHighlightB.png);
}

When we threw IE PNG Fix at these images, they ended up migrating to the top of their container rather than the bottom, ruining the look of the entire sidebar module.

To get IE PNG Fix to work with these images, we'd have had to make them foreground images - a no-no if you're trying to avoid junk markup. Why punish the good browsers just to code around the one bad one?

An unsatisfactory solution: Just let IE6 user suffer

Our initial approach to this problem was to get rid of our bottom rounded corners altogether in IE6. To accomplish this, we used a CSS filter:

/*
	kill sidebar background images for IE6using a CSS filter;
	remove bottom padding since there's no corner to display
*/
* html #content #rail .railBlock {
	background-image: none;
	padding-bottom: 0;
}

This spared our IE6 visitors from seeing ugly grey halos around our corners. But our designers didn't enjoy seeing their lovingly crafted sidebar design looking like it had been hacked off at the ankle (see first image).

jQuery to the rescue

Our revised approach was to re-insert the background images that we'd removed from IE6 as foreground images. We were able to do this using a couple of lines of jQuery-flavored JavaScript.

The code was pretty simple:

• Using the jQuery object's browser.msie and browser.version properties, we were able to deploy the code only to IE6 and earlier. (IE7 provides native transparent PNG support, as do most other modern browsers.)
• Because our sidebar modules come in two color schemes, we had to scout out two different sets of DOM nodes using jQuery's selector mechanism.
• For each set of matching nodes, we appended the correct PNG image to the end of the node as a foreground image using the append method, which inserts arbitrary HTML into the DOM. These are the exact same PNGs that are deployed as background images in the other browsers.

The resulting JavaScript looks like this:

$(document).ready(function() {
	/*IE6 fixes*/
	if ($.browser.msie && $.browser.version < 7) {
		/*append a non-semantic img to the bottoms of sidebar modules to add rounded corners*/
		$('.railBlock.highlight').append('<img
			src="/sites/pfd/img/chrome/blue/railHighlightB.png" width="282"
			height="20" alt="" style="display: block;"/>'
		);

		$('.railBlock:not(.highlight)').append('<img
			src="/sites/pfd/img/chrome/blue/railB.png" width="282"
			height="20" alt="" style="display: block;" />'
		);
	}
});

We also had to override the bottom padding for the interior container of our sidebar module, giving it a single pixel of padding; otherwise IE6 would sometimes get confused and display our JavaScript-inserted image behind instead of below the content in this container. The original CSS declaration and the IE6-specific override look like this:

#content #rail .railBlock .text {
	background-color: #ebebeb;
	padding: 5px 1em 0 1em;
}
* html #content #rail .railBlock .text {
	padding-bottom: 1px;
}

Once deployed, this code gave our IE6 users a much better experience (see second image).

This might seem like a lot of effort just to get around serving non-semantic foreground images. But really, a single CSS declaration and a short JavaScript routine aren't too much work to earn a gold star in the web standards department.

The only drawback to this approach is that users with JavaScript turned off in IE6 will see the ugly, lopped-off version of the sidebar design (see, again, the first image). Given that this is a purely decorative matter and not an issue of functionality, that's a compromise we can live with.

UPDATE: This isn't really a problem, however, because CSS behaviors don't work when JavaScript is disabled, anyway. Not only will JavaScript-disabled users see the lopped-off sidebar, they'll also see gray halos around all of the transparent PNG images that do get displayed. This is an IE6 limitation and there's not much you can do about it.

Progressive enhancement isn't about expending inordinate energy making things look pixel-perfect in elderly, on-their-way-out browsers. It's about providing as much as you can to as many users as you can while following as many standards as you can.

agile ajax

Comments: 5 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Thanks for this solution. However, what would be your suggestion in case i one has a png background shadow image around the whole site?

   1. i got one div holding a top left png shadow -> no problem
   2. i got one div holding a top right png shadow -> problem
   3. i got one div containing two other divs. one for bottom left corner and one for bottom right corner… -> problem

   would you suggest the same way? taking foreground images and positioning them as needed? or can i hack the positions in the turnbull solution already? (as mentioned in the article..)

   thanks in advance

   Comment by Tolga Besiktasli, Wednesday, April 9, 2008 @ 10:59 am

2. 

   My knee tends to jerk whenever I see script creating static web design elements. Have you thought of using SVG, like *in this page (scroll down for comments)? Safari, Firefox, and Opera all see the curved capstones around the comments, while IE doesn’t see the capstones (neither is there space taken up by the capstones in IE).

   I even have the page setup to sample the header graphic to generate the gradient color using server side technology that updates the CSS setting. The point is, though, there’s very little SVG needed for this example, and the effect degrades cleanly for IE, which can’t see any of the SVG.

   *Since you strip out URLs:

   http://realtech.burningbird.net/design/off-painting/

   Comment by Shelley, Thursday, April 10, 2008 @ 2:17 pm

3. 

   Use conditional comments to serve some IE6-specific CSS. In this IE6 specific CSS, simply send some GIFs down the wire in place of PNGs. Granted the GIFs won’t look as nice as the PNG solution, but they’ll look better than the unfixed PNGs for IE6 users with scripting disabled.

   Comment by Jeff Howden, Friday, April 11, 2008 @ 3:22 am

4. 

   Thanks for sharing.

   Little by little I’ve started to lose my obsession for keeping modern designs intact in IE 6, but sometimes clients just refuse to relax about it. One trick I’ve used in the past for rounded corners was to serve IE 6 aliased .gifs.

   Basically, create a rounded cornered .gif and delete any pixel that needs any percentage of transparency. The rounded corners are a little prickly but so is the default text rendering on IE 6 (even ClearType looks pretty squarish). The corners are probably not noticeable to a good percentage of IE 6 users as I’m guessing they are used to a substandard visual experience anyway.

   Comment by Ryan Fitzer, Tuesday, April 15, 2008 @ 11:38 pm

5. 

   i tried this out on a site that had similar problems… it fixed the transparency issue quite as expected… but it also created a new problem: it disabled mapping on one of the images used for links in the site.

   have u any solution to that?

   Comment by temiyemi, Saturday, June 7, 2008 @ 4:23 pm

Leave a comment