 |
|||||
 |
 |
 |
 |
 |
|
Tips & Tricks
Fighting IE 6-PNG’s
Most of us web designers would sooner code in AOL Press or Microsoft Word than use Internet Explorer 6 as a browser, but the fact still remains that up to 20% of computers on the internet still use IE 6. Some sites that we develop have as much as 35% of their user base still using the dreaded non-compliant browser. So like it or not, Internet Explorer 6 is here to stay for a while.
Web designers strive to make each site better than their last, but advancements in technique and design are made difficult by IE 6’s inability to comply. So we have to use certain tricks to get this browser to do things that come so naturally to others.
One advancement many web designers wish to use is alpha transparency through PNG’s. This can be a difficult task since, without a filter tag, IE 6 only renders blue color where transparency should be. There are ways to correct this problem for most kinds of HTML.
pngFix is one of the most common unilateral fixes for IE6’s PNG ailment. Basically it is a JavaScript script that (if IE6) looks for any PNG’s in a document and converts them into span tags with a Microsoft filter. It makes an attempt to reapply anchor tags, but tends to have “unexpected†results. This solution also does not work on backgrounds. For the most part, pngFix is the simplest way to correct sites that only have standard images that are PNG’s. It is also important to note that each PNG must have a set width and height for this solution to work. One last point is that this fix doesn’t working on images with a height of less than 10 pixels. This is because the span tag is set as if there is text in it. This tends to be an issue with PNG dividers.
After we have taken care of the majority of PNG’s, it is still necessary to manually apply IE filters on PNG’s that are too small or repeating. The main issue with manually applying filter tags to backgrounds is that you can’t apply both a filter tag and a background-image tag to a single image without breaking both compliant browsers AND IE6. In order to get around this, we use a trick to fool both IE6 and compliant browsers into ignoring each others CSS. For example, if we were trying to apply a background called blue_bg.png, the CSS would look like this:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=” blue_bg.png “, sizingMethod=”stretch”);
}
.main_bg[class]{
background-image:url(‘blue_bg.png’);
}
IE6 doesn’t understand attribute tags like [class], so applying the background here will not affect that browser. Also, with compliant browsers, redeclaring CSS with a [class] attribute makes the browser ignore all previous CSS tags with that name. This allows compliant browsers to ignore the filter cleanly.
PNG backgrounds tend to make certain elements unable to be selected. This can often be fixed by applying a position:relative; tag to both the PNG and any DIV elements that are visually above it. It may also be necessary to give the PNG background a z-index and set elements above that PNG for a higher z-index.
Even if alpha transparency is activated on PNG’s in IE6, there can still be problems. Unlike compliant browsers, fully transparent sections of PNG’s don’t activate anchor tags. The simple fix for that is to put a slight 1% white background behind the text of the PNG. This will allow all parts of a PNG to be selectable in IE6.
There are still some situations that require specific attention, but the majority of issues can be fixed with these simple steps.
Tags: 
Discussion
No comments for “Fighting IE 6-PNG’s”
Post a comment