As a web designer constantly dealing with deadlines, I’m constantly managing the time I spend on implementing features, fixing bugs, creating markup, you name it. More recently I’ve had to deal with PNG issues in Internet Explorer 6 a lot more than I would have liked to. Having worked on a project that required a large amount of PNG transparent images, I was quickly reminded of how the PNG fix for IE6 actually works. 

When I wrote the markup for a recent project, I did what felt right. I made use of background images for things like the logo, borders, and corners. I did everything possible to keep everything in the stylesheet. But that doesn’t work when it comes to IE6.

When I first got my hands dirty with the IE6 PNG Fix, it wasn’t an easy implementation for me some 2 years a go, but I included the pngfix.js file as I was supposed to (which can be found here: http://homepage.ntlworld.com/bobosola/) and was ready to move on. Unfortunately, the transparent part of the PNG images were a pastel blue. So thinking that perhaps I didn’t implement the javascript correctly, I went through the troubleshooting process. After about 15 minutes, and still staring at PNG images with pastel blue instead of transparency, I found myself cursing Internet Explorer 6, about ready to create an IF statement that kicked IE6 users to the curb. But as so many users were on IE6 at the time (and a decent number still using IE6 to this day), I pushed myself to nail down the specifics of the PNG fix.

What I learned?
The PNG fix doesn’t fix background images specified using CSS. Rather, you need to actually have the PNG image in the markup.

For example, the following markup would result in the transparent portions of the image to not be transparent at all:

/* CSS Stylesheet */
#footer {
   background-image: url('/assets/graphics/footer-bottom.png');
   height: 10px;
   width: 980px;
}

<!-- XHTML Markup -->
<div id="footer">
</div>

To have the PNG fix actually work, the image needs to be in the markup. I also created a new CSS selector to specify the dimensions of the image (so I wouldn’t have to specify the dimensions in the markup):

/* CSS Stylesheet */
#footer {
   height: 10px;
   width: 980px;
}
   /* For PNG Fix to work properly, image dimensions need to be specified.
       I prefer to keep everything in my external stylesheet, rather than
       having it in the <img> element */
   #footer img {
      height: 10px;
      width: 980px;
   }

<!-- XHTML Markup -->
<div id="footer">
   <img src="/assets/graphics/footer-bottom.png" />
</div>

It’s also good to remember that in general, IE6 doesn’t follow the “inherit” value (nor does it automatically assume to inherit the parent). Therefore its a good rule of thumb that in order to minimize IE6 problems, specify dimensions for every “selector”. It does make it a little inconvenient as you’ll need to change both parent and child element dimensions (rather than simply changing the parent element dimensions). But at least it keeps your IE6 css only file minimal (and in many cases, found that I didn’t need one).

This entry was posted on Friday, March 27th, 2009 at 2:17 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.