css png image fix for ie » blog » komodo media
css png image fix for ie » blog » komodo media
go to the home page
home
blog
folio
art
about
contact
music player
nov05
css png image fix for ie
filed under: geekery, web/coding, css, tutorials, javascript -
rogie @
11:49 pm
we’ve all seen them, the hoards of png fixes for ie6. that is because ie6 is a bag of smashed buttholes. i’m serious. it is. that is why we (web designers of the new world) have to continually come up with creative ways to solve the png issue. in case you are lost, just realize that in ie6, png images with transparency do not show their transparent regions, so you have to use some crazy ie6 proprietary filters. moving on.
lately, in projects i have been using a modified css snippet i found out on the interwebs to automagically replace png images with their alphaimageloader equivalent in ie6. check this out here and i’ll explain and give an example:
the css/code
* html img,
* html .png{
azimuth: expression(
this.pngset?this.pngset=true:(this.nodename == "img" && this.src.tolowercase().indexof('.png')>-1?(this.runtimestyle.backgroundimage = "none",
this.runtimestyle.filter = "progid:dximagetransform.microsoft.alphaimageloader(src='" + this.src + "', sizingmethod='image')",
this.src = "transparent.gif"):(this.origbg = this.origbg? this.origbg :this.currentstyle.backgroundimage.tostring().replace('url("','').replace('")',''),
this.runtimestyle.filter = "progid:dximagetransform.microsoft.alphaimageloader(src='" + this.origbg + "', sizingmethod='crop')",
this.runtimestyle.backgroundimage = "none")),this.pngset=true
);
}
for you purists out there, this is extremely hacky, so you may want to skip this whole entry entirely.
update: : css conditional comments for ie are a perfect way of hiding this hacky code from the good browsers. here is a way to bring in the css for only ie 6 and below:
<!--[if lte ie 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->
ok, there won’t be much in the way of explanation here, but let me explain what this little bad-boy does.
the selectors
* html img,
* html .png
the selector portion of the css rule targets which xhtml tags/classes this rule will be applied to. at first glance, it looks like all img tags as well as all tags with a class of "png". you’ll notice the * html in front of both of these. wait, there is no “anytag” preceding the html tag, so this won’t get applied! true. for all non-crappy (that is a pro term by the way) browsers, this rule won’t get applied. however, since ie6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. great! now ie6 is the only browser that will use this rule.
the rest of the code jargon
honestly, the rest you really don’t want to mess with much, but it suffices to say that this expression does a few things:
if the tag is an img tag, the expression checks to see if it is a .png image. if so, it applies a css alphaimageloader filter to the img tag to load the png file as a background image. it then points the src attribute of the image to a transparent gif so that the image isn’t overlaying it’s own background. voila! note: this only works well for images not resized by the browser. also, you’ll need a transparent gif 1px by 1px image on your server.
if the tag is not an img tag, then this expression takes the css given background image and shoves it into a background alphaimageloader filter. it then removes the real css background-image rule so that the background and the filter are not conflicting.
pretty cool! please note that this css expression is pretty generic. if you have some crazy css-ing to do, you might want to stick with using your own methods or apply the alphaimageloader filter manually.
also, if you are a standards-compliant junkie and this brushes you wrong, remember that this is intended to help with the crud of browsers. sometimes we have to break our own rules to do the job.
a demo!
let’s see a demo! see the goodness below:
my image tag:
my generic tag
wish i could play.
my link tag
update: links will need an additional rule of cursor: pointer;
38 responses to “css png image fix for ie”
bill
date: november 7th, 2007 at 11:07 am
comment:
119985
i like it. except the css won’t validate (or as you say, it’s hacky).
i think it would be much better to use “conditional comments” so that only ie6 will see it.
conditional comments are ideal because they are real w3c-compliant comments that only ie6 chooses to read. so, you get the best of both worlds. i would do something like this:
@import “/png-fix.css”;
and put all of the hacky stuff inito png-fix.css.
bill
date: november 7th, 2007 at 11:11 am
comment:
119987
actually the conditional comments worked so well in my example above, you can’t even see them. but, you get the idea.
rogie
date: november 7th, 2007 at 11:45 am
comment:
120004
great suggestion @bill. i have updated the tutorial to reflect your additions
jasper
date: november 7th, 2007 at 1:29 pm
comment:
120052
don’t care if it’s hacky - if it works where it’s supposed to, that’s all i care about. i shall banish it to the depths of my ie6 css file in the morning! many thanks for this - i’ve just been looking for this very solution!
kerwin
date: november 7th, 2007 at 3:42 pm
comment:
120123
i’ve read the same on some other blog, but it was getting way more into the scripting side.
thkx for making it a lot more easier to understand, it’s such a shame nobody thougt of this a few years ago…
jeff byrnes
date: november 7th, 2007 at 5:23 pm
comment:
120162
hmmm…tried it on my site, doesn’t seem to be working. not sure what i missed, perhaps you can take a peek & point me in the right direction?
bill
date: november 7th, 2007 at 6:14 pm
comment:
120184
btw, if you have ie7 installed as your default ie, but you have a copy of ie6 running as a standalone for testing, your standalone install of ie6 will think that it is ie7 when it looks at the conditional comments. you’ll want to test the css out without the conditional comments to make sure it’s working. then add the conditional comments back in so that it never interferes with good browsers.
mike
date: november 7th, 2007 at 7:02 pm
comment:
120208
@bill: you should be able to fix conditional comments using the methods over at pie - they’ve always done the trick for me.
great tip for fixing pngs. i long for the day when we won’t have to use these hacks any more
rogie
date: november 7th, 2007 at 10:35 pm
comment:
120319
@all: word to your mother on gettin’ rid of these hacks. one day ie6 will be banished to the fires of mount doom as it should. for now it will just infect us and make us weaker.
@jeff: dude, tell me what’s going on or link me. i’d love to help you out on this issue. maybe it’s a wee glitch in this script…
zoel
date: november 8th, 2007 at 12:20 am
comment:
120398
must be used “/style/images/transparent.gif”? ……
franck
date: november 8th, 2007 at 2:20 am
comment:
120432
great ! that is the technic to fix png transparency.
thanks a lot.
christoph
date: november 8th, 2007 at 4:05 am
comment:
120461
it’s not working in ie6. lock at the screenshot: http://www.cgdesign.de/screen.gif
neil
date: november 8th, 2007 at 6:03 am
comment:
120495
does this work with repeated background images? (something that has also been missing from other techniques).
rogie
date: november 8th, 2007 at 8:01 am
comment:
120552
@neil: unfortunately, repeating background images doesn’t work with this technique. man, i wish it did!
@christoph: hmm, i can’t seem to replicate your screenshot. are you running multiple versions of ie?
riccardo giuntoli
date: november 9th, 2007 at 5:22 am
comment:
121108
nice article. finally a good solution to the png problem in ie6.
thank u!!!
bob
date: november 9th, 2007 at 11:53 am
comment:
121264
nice article with great solution to this problem. otherwise users have to shift to .gif but unfortunately they don’t support 24bit colors and alpha transparencies.
chris basey
date: november 9th, 2007 at 3:24 pm
comment:
121329
great trick - however it doesn’t seem to work if the background image is a link. or rather - the technique works, but the image isn’t linked anymore.
i am using background images for navigation - using image replacement, and while the transparency works like a charm they’re not clickable now
is there a way round this?
rogie
date: november 9th, 2007 at 8:48 pm
comment:
121507
@chris: the trick should work as a link, in fact i will update this post to show a link, however it is a known glitch that in ie6 any child link tag within a alphaimageloader filtered tag will be rendered useless. that is to say, you got a link in any tag that has an alphaimageloader filter, it will not work. however, it may work when applied with javascript.
tom h
date: november 11th, 2007 at 10:16 am
comment:
123187
hi, i tried this method but im having the problem where it displays the png correctly, but over the top of that has the non-loaded image box with a red x. any ideas? many thanks
rogie
date: november 11th, 2007 at 8:57 pm
comment:
123602
@tom h: tom, be sure that you have the transparent.gif image uploaded to your server and that the path to it is correct.
simon
date: november 12th, 2007 at 7:32 am
comment:
123872
hi
i would like to use this for a white logo on different coloured backgrounds. it needs to be positioned on the right hand side of my header using css. will it position bottom right? thanks
rogie
date: november 12th, 2007 at 8:12 am
comment:
123895
@simon: sure, add some css to make it absolutely positioned, or better yet absolutely positioned within a relatively positioned header. then apply add the rules bottom:0; right:0; that’s it!
luke
date: november 12th, 2007 at 10:04 am
comment:
123946
who knew? i could have sworn that azimuth property had something to do with accessibility for the deaf! this works very nicely btw and i added a js file that automatically adss the .png class to png images to ease it up a bit.
good job!
jerry
date: november 12th, 2007 at 12:35 pm
comment:
124008
a “bag of smashed buttholes”? classic!
bjarne j
date: november 12th, 2007 at 1:16 pm
comment:
124030
hi there
a really clever attempt to “crack” the ie png-problem.
one thing that bothers me…what about the performance ?. normally expressions in css are really performance-heavy, and your solution “connects” directly to all img-elements in the dom !
cheers
bj
bill
date: november 12th, 2007 at 3:18 pm
comment:
124118
anyone who is having trouble with using pngs in links on ie6 needs to avoid having the links absolutely positioned. for some reason ie6 will not let you click on a png background image when it’s absolutely positioned. i believe there is a way to fiddle with the z-index and trigger haslayout in order to fix it. i can’t remember the details offhand, but doing a search for “absolutely positioned pngs in ie6″ should give you some more info.
anna vester
date: november 12th, 2007 at 7:17 pm
comment:
124273
rogie, nice one here. i have tweaked your code a little bit and it now works in ie6 with repeated background images. all you need to do is to change crop to scale. it works like magic!
i wrote about this addition to your png fix in my blog.
regards.
rogie
date: november 12th, 2007 at 10:56 pm
comment:
124436
@luke: crap! azimuth….ok, lets choose a rule that doesn’t hinder anyone.
@bjarne: word. maybe a rule of * html img.png would suit better. that way this script only works on images with a class of “png”.
@anna: very smart of you. however, scale will only work in one axis only, so if you need to repeat-x or repeat-y, you are golden, however if you need to actually repeat as in tile, i guess you are out of luck
akella
date: november 13th, 2007 at 6:58 am
comment:
124796
really nice hacky code!
but did you think about productivity of the script? as you might know expression will be calculated on each action on a page(click, resize, hover), not so good when you got dozen of them.
and actually there is a way to execute it once on load. i’m just not sure weather your code taking it into account or not?
confluence: site design
date: november 13th, 2007 at 7:23 am
comment:
124807
some links for light reading - november 13th, 2007…
semantify, and css tools based on blueprint…
thierry
date: november 13th, 2007 at 7:31 am
comment:
124815
css expressions are evil
http://developer.yahoo.com/performance/rules.html#css_expressions
rogie
date: november 13th, 2007 at 8:16 am
comment:
124850
@theirry: i totally agree. so you have 2 solutions:
1: hand code filters for png transparency.
2. recode the core of ie6 to make it not crap.
enjoy.
jasper
date: november 13th, 2007 at 8:23 am
comment:
124855
i’m working on a website with a lot of png. this hack is beautifull. but i’ve seen to run in to a problem. for a specific object i overrule the standard background png defined before, to this i need to use “!important” on my background value in css (talking about a background on a div). but when i use “!important” the hack doesn’t work for that object. now i’m going to try to figure out anther work around, but maby some of you readers have already got the solution? many thanks, jasper - mediact
riddle
date: november 13th, 2007 at 8:27 am
comment:
124859
thierry: they’re not if you know how to use them.
calculating height for element can and should be done real-time, without any checks, but if you simply replace elements or add new content, you should do this:
jscript: expression(
this.p ? 0 : (
//your code here,
this.p = 1
)
);
this way code gets executed only once. i’ve been using them for a looong time and i haven’t encountered any problems.
rogie, let me be an attention ho and link to my fixes for adv css.
and one more, i finished it yesterday. believe or not, but this splash page looks the same in ie6, thanks to expression().
one day ie6 will be banished to the fires of mount doom as it should. for now it will just infect us and make us weaker.
this is soo true. do any of you nay-sayers know that ie7 supports first-child, advanced selectors, transparent pngs and has all the position is everything bugs squashed?
whereas i need 10kb of hacks for my site to look the same in ie6, i only need 1 for ie7 (usually generated content, which i’m using for some time to clear floats).
expression() ftw, we can’t live in the stone age forever.
nick
date: november 13th, 2007 at 9:37 am
comment:
124906
bravo! i’ll be using this on my next project.
beautiful footer for this comments box by the way.
as for links within a container with this fix applied, you can give them “zoom: 1″ or “position: relative” to trigger haslayout and they should work.
thierry
date: november 13th, 2007 at 10:06 am
comment:
124925
@riddle: how many times this.p is evaluated?
riddle
date: november 13th, 2007 at 10:56 am
comment:
124952
thierry: you make ie think more when you hover a link than this small condition based on expando.
akella
date: november 13th, 2007 at 11:13 am
comment:
124956
afaik dropping “this.” where it is possible will make expressions 1-2 times faster.
just my 2c
drop a comment...don't be shy
name (required)
mail (will not be published) (required)
website
subscribe to the rss for this blog
search blog titles, entries and comments.
komodo media
about
my resume
about komodo media
rates
portfolio
portfolio page
great links
design
css beauty
nathan smith's site
css zen garden
a list apart
style gala
theology & technology
deviantart
css compilation
colour lovers
css help pile
web dev bookmarks
cascade computers
other
music spinning
threadless
link love
blingo search
bloggin' it
blog entries by category
art
music
portfolio
geekery
general
web/coding
css
javascript
movies
tutorials
photos
life
epiphanies
fun
howto
tumblelog
design
archive
november 2007
october 2007
september 2007
august 2007
july 2007
june 2007
march 2007
january 2007
december 2006
october 2006
september 2006
august 2006
july 2006
june 2006
may 2006
february 2006
january 2006
december 2005
november 2005
october 2005
september 2005
august 2005
july 2005
june 2005
may 2005
april 2005
march 2005
february 2005
december 2004
october 2004
september 2004
entertainment
music spinning
jeremy camp
aaron shust
jeremy camp
shawn mcdonald
jeremy camp
jeremy camp
todd agnew
casting crowns
jeremy camp
jeremy camp
gaming
world of warcraft
unreal tournament 2007
tiger woods pga tour 06
zelda: the windwaker
counter strike
komodo media version 3.0
Acceuil
suivante
css png image fix for ie » blog » komodo media What Mozilla users should know about the shell: protocol security ... GUNDAM FIX FIGURATION Outlook Recovery Tool to Fix PST File - PST Repair Software NVidia Refresh Rate Fix Win2K/XP - PC INpact AmyFix.com Fix - Wikipedia Heroes: The Fix - TV.com Conservatives to fix glitch that could block rural voters WMP Scripting Fix Ezee-Fix Don’t Throw Out Your Broken iPod; Fix It via the Web - New York Times Jim Fix Fix Your Own Printer Download details: SafeDisc Windows XP Fix for Microsoft Games It's not always malware: How to fix the top 10 Internet Explorer ... The Fix - Salon.com Fix 4 RSO fixoyun fix oyun fiks oyunlar fıxoyun fıx oyun fiks oyun fix ... Editor's Daily Blog: A Temporary Fix Screenplay Coverage from ***** script-fix ***** FIX-TIPS Free Football picks & Best Soccer betting tips, soccer ... Amazon.com: War Fix: Books: Steve Olexa,David Axe Coldplay – Fix You – Music at Last.fm WinXpFix.com Home page (wixpfix.com) Windows xp news, Tips, Free ... M i c h a e l F i x fix Tricky fix-up plan devised for space station- msnbc.com WinSock XP Fix 1.2 Freeware download page - tested and reviewed ... FIX, starring Shawn Andrews, Olivia Wilde, Megalyn Echikunwoke ... High-fi fix for malfunctioning Guitar Hero III Les Paul - Engadget Qwik-Fix (de PivX Labs) Fantasy Fix: Starters - MSN Video AppleInsider iMac Software 1.2.1; Time Machine fix; MacBook ... AppleInsider Apple releases iMac freezing fix, MacBook Pro ... Microsoft to Fix Two Windows Holes on Patch Tuesday Les plus beaux restaurants du monde : Le Fix NASA plans spacewalk to fix ripped solar wing - CNN.com BBC - Languages French Quick Fix - Basics DailyTech - Apple Releases Fix for iMac Freeze Issue, Updates MacBooks PC World - Apple Posts QuickTime Security Fix PC World - Two Charged with Hacking PeopleSoft to Fix Grades Troubleshooting 101 : How to fix the family computer and save your ... Apple posts fix for freezing iMacs - Engadget Digg - Don’t Throw Out Your Broken iPod; Fix It via the Web Kitco Inc. - Past Historical London Fix Fix-A-Flat - Car Care Products- A easy way to fix a flat tire IPv6 Fix: Home Intel Researcher Homepage Fix the pumps réseau pc fix(usb) portable wifi - je ne trouve pas les config ... Télécharger Works Fix FixMyXP.com - Your One Stop Windows XP Fix It Site ColdFusion 8.0 Cumulative Hot Fix 1 ColdFusion MX 7 Cumulative Hot Fix 3 Definition of fix - Merriam-Webster Online Dictionary 6 Ways to Fix a Confused Information Architecture (Jakob Nielsen's ... Growing a Business Website: Fix the Basics First (Jakob Nielsen's ... BBC NEWS Science/Nature Lovelock urges ocean climate fix BBC SPORT Tennis Llodra reveals match-fix approach Aimfix - Jayloden.com