Comments on Cross-Browser Variable Opacity with PNG: A Real Solution

by Michael Lovitt

170 Reader Comments

Back to the Article
  1. Calling this article a ‘real solution’ is not entirely accurate. It is a hack, not a solution.

    As this hack relies on proprietary CSS and JavaScript (browser detection no less ...), it requires the user to cruft their code up just to achieve a similar result which can be had using well planned gifs or jpegs. This ‘solution’, IMO, is worse than the problem (the need for alpha transparency in images).

    I read a list apart regularily, yet lately it has become no more than a publishing house for web design hacks. I much prefer articles on web design methodologies.

    I’m not sure what web design journals will write about once browser manufacturers properly support standards - however a list apart should start considering this, and publish articles which will outlast the need for hacks.

    Copy & paste the code below to embed this comment.
  2. I’ve found youngpup’s sleight.js to work well for the same purpose, most of the time. While still a hack, it has the advantage of not requiring you to change any of your image tags—you need only to insert the javascript call in the head section.

    http://youngpup.net/_ui_webapp/getFrames.asp?request=/snippets/sleight.xml

    Copy & paste the code below to embed this comment.
  3. as for me, standards within the web have become a fata-morgana. they seem so close these days, yet to far to ever reach them. i, and i assume many others too, feel like being out in a desert with no water around, walking towards an oase that is not really there.
    it is simply an illusion!
    let’s face it: we will never get the standards we need, certainly not anytime soon. maybe i am pessimistic, but i think these hacks are the best we’ll get for now, and for the future too.
    i am glad that finally png is worth considering for implementation, because it is simply better and cheaper than gif.
    finally, i would like to point out what michael lewitt wrote:

    <i>“To provide GIF support in their applications, software makers like Adobe and Macromedia must pay royalty fees—fees which are undoubtedly passed down to the end user in the selling cost of the software.”<i>

    Copy & paste the code below to embed this comment.
  4. Another hack for alpha transperancy, I like this solution as it loads 8 bit alpha png where supported and 32 bit png for IE5.5 and IE6.

    http://dhtmlnirvana.com/pngswitch/pngswitch.html

    Copy & paste the code below to embed this comment.
  5. Too bad this can’t be used to make the CSS background-image property work with PNGs. Although… you could make a script that would find any element with a background-image property specified, and create an absolutely positioned div behind it with the image, but it wouldn’t repeat…

    Oh, and I didn’t know it was pronounced “ping…” who decided that? =)

    Copy & paste the code below to embed this comment.
  6. I agree on the point that PNG is a great format (specially compared to GIF).
    But I just feel that this hack is just to big. Making use of a emty Div tagg for an image sound very clumbsy and will be a big loss in sematic.
    So for now GIF/PNG will have to do for me.

    Copy & paste the code below to embed this comment.
  7. I’m a bit of a novice (only started learning HTML earlier this year) and I don’t know any JavaScript, so please ignore this if I am way off the mark. In the text, JavaScript is being used to sniff for IE 5.5. It struck me that it might be possible to make use of Microsoft’s proprietary “Conditional Comments” to handle that side of things, and thus simplify the browser detection. Forgive me for not working it out myself, but I am sure someone more able than I could have a go.

    For a full description of “Conditional Comments”, please see this page of the MSDN site:-

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

    Copy & paste the code below to embed this comment.
  8. The Conditional Comments that Simon suggested has the advantage of not cluttering up the DOM, but has no other advantages. It goes like this (I hope ALA’s forums escape it correctly):
    <!—[if ie gte 5.5]>
    <div
    <![endif]—>
    <![if !ie]>
    ...
    <![endif]>
    Conditional Comments are only implemented for IE 5 and above, that means for browsers like IE 4, the <img> tag with a PNG image is output. You can probably use a text editor to automate placing all these code, but I think it would be easier to find alternative designs that don’t use PNG for now. For instance, I create designs that circumvent the incorrect IE box model (I am extremely careful when using width with padding and margin, etc.)

    Copy & paste the code below to embed this comment.
  9. Here’s another hack… it’s been working for me nicely, though it causes my CSS to stop validating. It has the advantage of working pretty much automatically.

    http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

    Copy & paste the code below to embed this comment.
  10. You don’t need the extra div in the article. That was just the MS example on their site.

    Here’s an example with conditional comments. If you don’t mind sticking ie5 and nn4 with png, you can do this:

    images/bird.png

    <!—[if gte IE 5.5000]>
    [removed]
    window.attachEvent(“onload”, pngFix);
    function pngFix() {
    for (i=document.images.length-1;i>=0;i--){
    x=document.images;
    if(x.className=='pngAlpha') {
    x.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+x.src+"')"
    x.src="images/spacer.gif";
    }
    }
    }
    [removed]
    <![endif]—>

    *******
    Or you can put it in a separate script and use js for the browser check. You can also put it at the end of the page and get rid of the onload event.

    You could also swap the png for gifs for ie5 and others quite easily.

    You could also start with gifs and swap to png of the same name for good browsers and js.

    Copy & paste the code below to embed this comment.
  11. In the article, Michael writes “In IE5.5+/Win, the transparent area of your PNG will display at 100% opacity—that is, it won’t be transparent at all.”

    That’s not strictly true. In my experience the transparent area displays 100% transparent. For example, this PNG* has a drop shadow using variable transparency:

    http://www.clagnut.com/images/topstylecolourpicker_full.png

    When viewed with IE5.5+/Win the shadow is not displayed at all, however the article implies it would be displayed fully opaque. In this case, full transparency is certainly preferable to full opacity.

    * As used in an article at http://www.clagnut.com/blog/80/
    I should point out that the PNG was coded using an IMG tag rather than as a CSS background.

    Copy & paste the code below to embed this comment.
  12. On closer inspection the methods described in the article still don’t enable the afore-mentioned drop shadow in IE5.5+/Win (it’s fine in Mozilla).

    Note that I added the drop shadow using a Fireworks MX Live Effect (also possible with Photoshop Layer Effects). I don’t know what difference this would/should make though…

    Copy & paste the code below to embed this comment.
  13. Thanks but no thanks. I’ll be damned if I’m going to put IE only code into my XHTML 1.1/CSS 2 pages.

    For a while now I’ve been using PNGs as a replacement for gifs, but only 8-bit PNGs, not 32-bit. They work in 5th generation browsers and up, that’s what counts. Besides, 32-bit PNGs are a hell of a lot larger than their 8-bit brothers, so unless there’s a justifies reason to use 8-bit alpha then I’ll avoid it. Not everyone has broadband to download these bloated images quickly, me for example.

    Copy & paste the code below to embed this comment.
  14. While I appreciate the desire for alpha transparency, and I love reading a well written article such as this, I must side with the nay-sayers this time. If we still have to make all the gifs, and sniff-and-serve, it’s more work, more time, more money, and clients don’t like that. It is super cool though, very appropriate for personal portfolio sites and the like, and I cannot wait until we can start really using transparency in the design process.

    I don’t get why ie5.2 on mac os.ten can see a png used in a page, but not directly.

    Copy & paste the code below to embed this comment.
  15. Mathias Langenegger said he thinks that standards are an illusion. We may never have a world with universal W3C standards but that doesn’t mean we don’t have a de facto standard of some sort. It’s simply too expensive to code and maintain code for different browsers.

    Since large corporations typically only support one browser, anyone wanting to sell Web-based systems to them have to support that browser, or loose the sale. Since most companies support IE on PCs, that’s the standard that is used for development. As more products emerge that require IE, more companies deploy it, which means more companies code for IE, etc, etc.

    Copy & paste the code below to embed this comment.
  16. How about a single Javascript function that adds the filter to all select images?

    This one is invoked like so <body > and affects all <img class=“pnga” >. Replace “document.all” with the IE detector of your choice. Still doesn’t address 8-bit RGBA images or CSS backgrounds, but it’s a lot cleaner within the HTML…

    Thanks Michael for the article :-)


    function pngfix() {
    if (document.all) {
    var i, a, f;
    for(i=0; (a = document.getElementsByTagName("img")); i++) {
    if (a.className=="pnga") {
    f = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+a.src+"')";
    a.src = "/images/blank.png"; // Blank image required
    a.style.filter = f;
    }
    }
    }
    }

    Copy & paste the code below to embed this comment.
  17. Erk, should point out that images can be included as normal:

    [img]my-alpha.png4XBcHJm64DJJeO90OAfqpd3t6myhon3otypography_img_src_end width=“200” height=“100”
    alt=“a fine alpha graphic” class=“pnga” [/img]

    Copy & paste the code below to embed this comment.
  18. I didn’t say it…

    http://webstandards.org/buzz/archive/2002_12.html#a000123

    Copy & paste the code below to embed this comment.
  19. How ironic that the headline image for this article is a GIF and not a PNG. =P

    Copy & paste the code below to embed this comment.
  20. It just occured to me: why would you bother to use these kinds of solutions/hacks/maintenance nightmares to serve up the right PNG images to the right browser to allow it to move from left to right over a photographic background, when you could use Flash for this?

    I warned you, it is a stupid remark, but apart from semantics, DOM’s etc, Flash could be a better everyday life solution because it is almost omnipresent on different platforms - and according to the latest stories I read you can even make it accessible to everyone these days.

    And I believe that all the effects illustrated in the examples in the article are meant for beautification, for ‘coolness’, not for accessibility or usability purposes. Which doesn’t make it a bad thing though, (visual) seduction of the user is as important as functionality. (ok - enough disclaimers, now shoot ;-) )

    Copy & paste the code below to embed this comment.
  21. I have to agree with Martijn. Flash could be a better solution here. The support for it is greater than for PNG, It support alpha transparensy etc. And, if you are going to use a text it will be more accessible i a flash movie (coded right ofcourse) than as a Image.

    Copy & paste the code below to embed this comment.
  22. I am not sure I agree about using Flash as an alternative and I certainly disagree, as elvelind suggested, with the idea that Flash has “better support”. Flash requires a download whereas support for PNG files (however iffy) is built directly into the browser.

    Having said that, I am completely in agreement that browser sniffing is a bad idea in the first place and it rather makes this article stand apart from most found on ALA.

    Copy & paste the code below to embed this comment.
  23. While I agree this is a hack, the major difference is this isn’t about restricting features to certain browsers. Instead, it enables a recommended web standard in a browser where it otherwise didn’t work, much like the style sheet switcher (albeit without sniffing). Personally I favour the methods that take all Javascript out of the HTML (restricted to [removed]) so the pages remain content focussed, and it’s clear that this is possible.

    Copy & paste the code below to embed this comment.
  24. Michael writes:

    This problem is especially frustrating because IE5/Mac is the only browser which natively supports PNG and behaves this way. We’ve notified Microsoft about this apparent bug and hope for it to be fixed in an upcoming release.

    Couple problems with this idea. First, I suspect Microsoft is working harder on bugfixes and feature enhancements for their Windows-based products than for their Mac ones. Second, if the problem with IE/Win were fixed, this whole hack becomes unnecessary.

    If we’re going to petition them for bugfixes, let’s ask for the ones that will simplify our lives, rather than the ones that make our clever hacks work better.

    Copy & paste the code below to embed this comment.
  25. Hi folks, I wanted to thank all of you for your excellent feedback. I look forward to checking out the alternate workarounds posted here to see how they compare to the method described in the article. What I’d ultimately like to do is amend the article to include these workarounds, so please continue to post your ideas.

    I also wanted to address Drew’s comment: I agree it would be foolish to ask Microsoft to fix a bug only to accommodate this article’s specific workaround, and that’s not what we’ve done. What we’ve done instead is request that they fix a bug which affects PNGs in IE5/Mac, when the PNG is applied as a CSS background image. A PNG in this case appears 100% opaque, with or without this article’s workaround. You can see for yourself by pulling up the following page, which is standard CSS and HTML (no workarounds), in IE5/Mac, where the background image appears solid, and then in Opera 6+ or Netscape 6+ (Mac or PC), where it appears translucent.

    http://lovitt.net/opacity/test/nojs/test.htm

    Again, what we’re doing here is using the browsers’ native ability to display a PNG with alpha transparency, which IE5/Mac allegedly does, but does not do when the PNG is applied as a CSS background image.

    One last point: the article’s method is, as some of you have pointed out, a hack, and an ugly one at that. While it’s clearly not appropriate for everyone all the time, it is a handy tool to have in one’s bag of tricks, for those situations where you want to try something new with your design and you can afford to let your code get a little dirty.

    Michael

    Copy & paste the code below to embed this comment.
  26. I would stay away from the Microsoft PNG Filter. I used it once on a project—and the small PNG’s took up to much memory. I think the only solution is to wait till IE on windows fully supports them.

    Copy & paste the code below to embed this comment.
  27. I don’t own software capable of producing either GIF or SWF format images, my favourite browser supports PNG well, and none of my browsers can display SWF images. I’ve been using PNG consistantly for well over a year (rarely using transparency masks), and if an old version of a browser I have nothing to do with doesn’t support a feature which isn’t very useful (and also doesn’t break anything accessibility-related when unsupported) I’m rather inclined not to care… Am I missing the point?

    Copy & paste the code below to embed this comment.
  28. As long as the incompleteness of IE persists, the search is on for an easy, site-wide hack, or something that comes close enough. Mostly easy, since alpha, even GIF transparency, is still a luxury function, and putting a huge script on each page in a sense defeats the purpose of luxury.

    So for the time being, I’m going with Youngpup’s Sleight.

    A major advantage of Sleight is that it allows you to code images normally, without worrying about whether or not you put in the script backwards or upside-down. All your PNGs on all your pages will be affect by one (small!) script and be merry in their alphaic glory.

    By the way, both Sleight and this article’s hack use the exact same filter by Microsoft to produce the alpha. The difference is that Sleight is an external javascript, takes up no more bytes per-page than a stylesheet link, and thus implements in a, um, flash.

    -

    About the memory usage - is that really such a big issue? How big is the risk of a page being so filled with massive 32-bit PNGs that computers run out of virtual memory?

    Copy & paste the code below to embed this comment.
  29. you may recall, from a familiar publication, the following: “If you are deliberately deforming your markup to accommodate an increasingly small percentage of users, and if that deformation locks out other users (such as people with disabilities, or those who use Palm Pilots, Lynx, Braille readers, and other non-traditional browsing devices), you might consider upgrading your standards compliance even if the resulting sites look fairly ho-hum in old browsers. If your site is compliant and the content is accessible to all, you have probably done the right thing.” ( source: http://www.alistapart.com/stories/tohell/ )

    it’s about standards, people. yes, the png format is great, and to sign a petition which encourages microsoft to support it fully is also a good thing. however, to create asinine workarounds for support in incompliant browsers doesn’t scale, doesn’t validate to documented standards, and is a step backwards.

    the quoted article’s point still stands: to hell with bad browsers.

    Copy & paste the code below to embed this comment.
  30. I appreciate the intention of this article, but wouldn’t it be better to explain the actual filter? I don’t really mind if I have invalid css rules. CSS was actually designed with that in mind. Agents that don’t understand a rule should just skip it.

    [removed] is something I always try to avoid. Content is in some form of markup, not println/writeln statements.

    Solutions such as youngpup’s sleight or the webfx thing are also well-intentioned, but I don’t loop through the document. It’s something I just avoid doing unless I can’t find another way.

    This stance leads to faster page rendering. In looping through a nodelist or two, you slow down the page rendering. For large documents, it can make the difference of over a second, and yeah, I have stopwatched it.

    I’d like to be able to just use the css rule, but I don’t have windows IE, so I can’t really test it out. I’d like to have some more information on just the ImageAlphaLoader, the properties and parameters, what each one does, which ones I should use to get the same effect as png img in Mac IE/Mozilla.

    I thought I should clarify that although filters don’t work in mac IE, png images appear correctly.

    As an alternate solution, I have decided to use png and then cut out the drop shadow and save it as a gif. I use a gif for windows IE and png for everything else (It looks super-groovy in NS4, which gives the png a white bg.)

    I just used server-side split, something linke

    String ext = browser.isIE() && browser.isWin() ? “.gif” : “.png”;

    /img/erika/tits<%=ext%>

    Copy & paste the code below to embed this comment.
  31. The previous post makes a good point, but a server-side split makes more problems than it fixes. For example, if I save a document in IE Mac that uses the previous post’s technique and then open it in IE Win, it’ll use PNG images which is not the desired effect.

    Copy & paste the code below to embed this comment.
  32. AFAIK you dont need any js to view transparent pngs correctly… apples quicktime can render it - just go to system preferences -> qucktime -> browser plugin -> mime preferences -> png images

    then just include a js for reminding ppl to install quicktime and view pngs with it…

    michael (please excuse my ****** english ... :))

    Copy & paste the code below to embed this comment.
  33. And what about png’s that combine 100% opaque parts with 60% opaque parts and even 0% opaque parts ? This hack works fine with the given examples but will never be able to grasp the full potential of the PNG format and therefore (no matter how well the article is written) will not be very usable.
    Take this link for example:
    http://www.ncf.ca/~bh447/pngdemo/ (needs gecko)

    This is never going to work in IE (and i’m not talking about the javascript ;)

    Copy & paste the code below to embed this comment.
  34. That’s WUTANG. CLANG-A-LANG. I don’t intend to use this hack, I shouldn’t have to. If PNG is going to be made a standard, then Win32/IE should clanging well support it. It’s pathetic.

    Alpha-transparent images isn’t really so much to ask for is it? I never use JavaScript for anything essential, my work has to be accesible to non-javascript browsers. I come here mainly for XHTML/CSS advice!

    Copy & paste the code below to embed this comment.
  35. sorry wrong info - pngs dont work with the quicktime plugin

    Copy & paste the code below to embed this comment.
  36. This is easily one of the dumbest articles I’ve read on here in a long time. Is Zeldman abandoning his love of non-hacked standards compliance in favor of just having something to toss up on ALA once in a while?

    Copy & paste the code below to embed this comment.
  37. Re: Louis Bennett’s comment…I don’t consider a 90+% market share an “increasingly small percentage”, and that, I’m afraid, is the problem here. If Opera’s PNG support was naff there wouldn’t be this article and we wouldn’t be here lamenting it; people would use PNGs and Opera be damned. But when the most widely-used browser by an incredible margin doesn’t support a feature, you can’t professionally afford to take the moral high ground and screw those visitors.

    I don’t like avoiding or working around problems with *any* browser, but there are professional realities. Coding your site with translucent PNGs and not implementing any workaround for IE/Win isn’t going to make Microsoft sit up and take notice, it’s only going to give you a site that doesn’t look right for 90% of your potential market. Yes, that sucks, but most of us have to eat. Ignoring Netscape 4 and the version 3s is an satisfying luxury we can apparently now afford; ignoring IE6 isn’t.

    Copy & paste the code below to embed this comment.
  38. ...or at least a shorter hack. I can’t believe no one here has mentioned this.

    <object type=“image/png” data=“my.png”>

    myalternate.gif

    </object>

    Then add a class or style snippet to the object tag with that Alphaloader business so that all modern versions of IE see the same variably opaque result as browsers that support the feature natively. If png isn’t well supported by a browser, the gif is displayed instead. No muss, no fuss, no sniffing.

    Copy & paste the code below to embed this comment.
  39. My HTC make IE look like it support the alpha channel it self
    http://hkdennis2k.virtualave.net/htc/png.html
    ( It written in chinese BIG5 code, if you don’t know it, just skip it.)

    Just one easy code to use the effect, and can apply all the images at once
    One property to enable the support
    Keep the context menu of the image when right click on it
    Do not need any knowage of javascript/vbscript

    Copy & paste the code below to embed this comment.
  40. Personally, I avoid as much as possible designing sites that aren’t liquid, and in that case, of the biggest reasons to use PNGs is to facilitate the building of complex, graphically rich *liquid* page designs.

    PNGs [theoretically] give you a MUCH wider range of “brushes” to work with as a designer of liquid pages, allowing you to do really interesting things like tints that move/expand with the browser window or overlapping graphic elements that move while always seamlessly gradiating into the the page’s background, among many other things.

    Copy & paste the code below to embed this comment.
  41. What about using http content negotiation, and letting the browser decide whether it can properly display a .png file? I don’t have a Windows machine to test this with.

    Use mypic in your web page, turn on Apache mod_negotiation, and let the browser choose whether to load mypic.png or mypic.gif.

    The $64 question is: will IE5.5+/Win choose the png or the gif? What do you see when you go to <http://www.cs.sfu.ca/~ggbaker/reference/negotiation/happy>?

    Info about content negotiation for Apache is at <http://httpd.apache.org/docs/content-negotiation.html>.

    Copy & paste the code below to embed this comment.
  42. So how will this help me? I want to acieve this effect using PNGs:

    I have a page with a (fairly) complex pixel pattern as the main background. Then, centered in the middle of the page is a 600 pixel colored table. I either side of the table, I want to place, what will essentially be a gradient, image that will act as a shadow to give the centered table depth. Basically the image is 8 pixels wide, with varrying lines, each at descending opacities. This should give the effect of a shadow, but I can’t do this in a gif because you can only pick one color to be transparent. Drop me a line.

    Copy & paste the code below to embed this comment.
  43. I tried the content negotiation thing, which sounds very useful, but I got not-such-good results:

    Win2k Mozilla 1.0: PNG
    Win2k Opera 6.0: GIF
    Win2k IE 5.5: broken image
    Win95 IE 5.0: broken image

    Could it be that Microsoft doesn’t cooperate in the negotiation?

    Copy & paste the code below to embed this comment.
  44. IE5/Mac doesn’t show aplha transparency as a background in a div? No entirely true. Maybe it’s just on my computer, but “no-repeat” in your background makes alpha work just fine.

    —chris

    Copy & paste the code below to embed this comment.
  45. Nate: the IE/OS X issue is with the QuickTime plugin. More on that @

    Martijn: Flash only has alpha transparencies to HTML elements through the ActiveX component. Very likely, the same elements that this article uses through IE style sheet extensions are the same components the ActiveX layer uses to render its alpha channels. So no, Flash isn’t the solution here.

    IMHO, this is the place for a PNG ActiveX component with an image tag inside of it… if you need PNGs that badly. Not that I know of a good one off-hand.

    Copy & paste the code below to embed this comment.
  46. Here’s an example that this ‘hack’ (I’d call it a patch) facilitates:

    http://www.webreference.com/authoring/style/sheets/headlines/7.html

    Looking back, the code I posted on the first ‘discuss’ page (‘What if?’)works in a similar way to ‘sleight’, but I stand by my solution as it discriminates by class instead of extension, thereby limiting the patch to one or two images per page. I have revised it to include ‘sleight’s’ attachEvent so only the [removed] tag and class names are required in the HTML: http://www.ross-gill.com/scripts/pngfix.js

    Copy & paste the code below to embed this comment.
  47. (in reply to: alun david bestor)

    first off, i acknowledge that i mis-read the article as saying that the hack was for msie/win/5.5 *only*, as opposed to the stated msie/win/5.5+. either way, there are still two issues:

    [1] the hack offers no semantic value.
    [2] as soon as the msie windows teams fixes this bug, employing this hack will be about as hip as utlizing <blink> and <marquee>.
    [3] (in reply to: alun david bestor)

    first off, i acknowledge that i mis-read the article as saying that the hack was for msie/win/5.5 *only*, as opposed to the stated msie/win/5.5+. either way, there are still two issues:

    [1] the hack offers no semantic value.
    [2] as soon as the msie windows teams fixes this bug, employing this hack will be about as hip as utlizing <blink> and <marquee>.
    [3] in my opinion, creating a double-standard for utilizing hacks (is it compliant? no… well is it msie?) just doesn’t scale. the issue at hand here is that there isn’t adequate browser support to utilize png - for the same reasons people don’t utilize position: fixed, css attribute or descendent selectors, and any other under-supported technologies. sure, this hack may float your boat in the short term, but it just doesn’t scale in the long term.

    Copy & paste the code below to embed this comment.
  48. [1] three issues.
    [2] bizarre content duplication
    [3] sorry for the w.o.b.

    Copy & paste the code below to embed this comment.
  49. In reply to Louis,

    [1] Some posts presented in this discussion do offer alpha PNG support with nothing more than a [removed] include. I would consider this another content-agnostic rendering instruction, though not quite as ‘pure’ as CSS.

    [2] <blink> and <marquee> as you suggest have little semantic value and as such were never recommended standards. But PNG is recommended and variable transparency/opacity are a fairly useful facet of the PNG spec (e.g. if you are using alternate styles). As IE, and therefore the majority of browsers in use, don’t support PNGs out the box (as has been the case for more time than it would take to implement*), this is the only way to facilitate the use of PNGs while retaining semantic HTML.

    [3] C’mon, Javascript is a hack unto itself. It may or may not cause problems in future browsers, but if and when MS (or anyone else) monopolise with a PNG compliant browser, you can simply remove the [removed] tag from your template and the rest of the document should still work just fine. Or if that’s too much work, just erase the contents of your single JS file.

    *I was really hoping this would be fixed in v5.0, then v5.5, then v6.0. What reason is there for this to be overlooked?

    Copy & paste the code below to embed this comment.
  50. re: chris comments #2 & #3:

    i’m not saying that utilizing png is a bad thing - i’m saying that utilizing this work-around is a bad thing. for those who don’t utilize templates, it would be impractical to go change every page they ever made with it, assuming these incompliant browsers are gone (that’d be several years’ time, given the current rate of change).

    again, i think the png format is great. all i’m saying is that this hack is anything but elegant, and think utilizing it is a step backwards in terms of web standards.

    Copy & paste the code below to embed this comment.
  51. I agree with Louis that temporary hacks that then need to be removed/tweaked when browsers update are impractical and contrary to the spirit of our enlightened modern ethos.

    Unfortunately, if we don’t use a temporary hack to make use of translucent PNGs now, their implementation might be delayed even longer due to continuing to be considered a marginal technology.

    As it stands, even if IE7 comes out tomorrow with full translucent PNG support we’ll still either need to use a hack or wait at least a full 2 years for IE 5, 5.5 and 6 to dwindle enough that their quirks can be disregarded. As many people have said, translucent PNGs open up completely new avenues of design; do we really want to be stuck using gifs in 2005?

    To wax editorial again, I am amused to note that today’s Zeldman update states “Instead of jumping through hoops to make a site look the same in Netscape 4 as it does in Mozilla…” ...we’re jumping through hoops to make a site look the same in IE6 instead. Color me cynical, but as far as I can tell the only thing that’s changed since 1998 are the version numbers we design for and the acronyms we design with.

    Copy & paste the code below to embed this comment.
  52. I really have to say it - when you get to the stage that you’re using client side scripting just to display an image, then something wrong… I will only be using PNGs without transparancy for now as they work reasonably. But I’m not messing around with JavaScript just to do something fancy.

    Content, content, content is more important…

    Copy & paste the code below to embed this comment.
  53. What I wan’t to pose is this: if we must go to the level of browser sniffing could it not (indeed should it not) be done server side??

    Surely it is wastefull and a good way of breaking future compatibility to inlcude such scripts in user facing code?

    I would sugest using something like JSP / PHP etc and simply creating an ‘image’ object that you embed in your code everywhere you use an image - this would then mean that no matter how many pages you created there was only one point of changes when something turned up broken…

    Equally I would like to point out that Flash is an even worse solution - at least this one should degrade to readable content (assuming graphics are not THE content).

    Copy & paste the code below to embed this comment.
  54. Personally I say just let IE5 break - until users start bitching to MS then IE won’t get fixed.

    This may be a hard pill to swallow but it’s definately for the best…

    Of course I also don’t believe in textual graphics since they arn’t very accesability friendly so as long as we just keep on using graphics as backgrouns/content images letting IE break isn’t such a bad thing…

    Copy & paste the code below to embed this comment.
  55. Since it seems that PNG transparency can´t be used in CSS backgrounds and we´re already looking at non-standart solutions maybe a good option should make be the microsoft´s Alpha filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alpha.asp) as an alternative to png in this particular case or even to be used combined with it.

    Copy & paste the code below to embed this comment.
  56. I have been using a method similar to this for quite some time now. However, it does not always work. Case in point: http://www.wdonline.com/talman/

    If you go to the menu and go to File->New->New User you’ll see that that PNG is not displaying correctly (I’m using WinXP Pro SP1 & IE 6SP1). It seems, however, that this problem is limited to this particular widget. I have used the exact same code (albeit different sizes) and it works perfectly. Go figure.

    Copy & paste the code below to embed this comment.
  57. > I have been using a method similar to this for quite some time now. However, it does not always work. Case in point: http://www.wdonline.com/talman/

    It sure doesn’t. It blocks my MSI5.1/Mac from access. Believe me, MacIE5 has far better standards support than the first two browsers you offer in the upgrade list (MSIE5.5 and 6).

    Poor UA-detection scripts.

    Copy & paste the code below to embed this comment.
  58. No, not poor UA detection scripts, just my choice. I have no Mac at my disposal; therefore, I cannot do the tests that I need to for any Mac based platform. Perhaps if Microsoft consolidated the code for both platforms (which will probably never happen) I would make the changes required to include Mac based platforms. So until I get a Mac of my own, it will continue to only be a Windows MSIE 5.5+ / Any OS Mozilla based site.

    Copy & paste the code below to embed this comment.
  59. I tried to make a png to go over an image on my site. It was large text, around 75pt, and I had it set to 45% opacity so the background would show through. The problem is, the image is about 30kb. What can I do to lower the size? Should I just use a jpg with the image already on there from photoshop? Is it really worth the size?
    -Spirit

    Copy & paste the code below to embed this comment.
  60. Hi,

    We use PNGs as an archival format for all photos now. With care we get very good results, on the WWW and paper, etc.

    I just wanted to remind everyone how bad Microsoft programs are compared to pretty well everything else. What garbage.

    Opera is avalable free and is at:
    www.opera.com

    convert youself, convert the ones you love. Even convert your enimies. No one should have to suffer that much!

    Oh. Opera does PNG’s perfectly. All the WWW tests for it, too.

    Regs,
    Dan

    Copy & paste the code below to embed this comment.
  61. No thanks. I prefer a browser that offers more than CSS support. But thanks for the offer

    Copy & paste the code below to embed this comment.
  62. The thing that gets me, is if microsoft have written that filter to make alpha in PNGs display properly, why the hell can’t they implement it into IE without a need for this hack?!

    They’ve got the code to do it, surely it’s just another one or two lines of code in IE to tell it to use that filter as default display for alpha pngs?!

    Copy & paste the code below to embed this comment.
  63. AAAHHHH!!

    Bad IE.

    Right, png is cool so i wanted to use it in my site redesign.

    problem 1, the whole alpha thang. So i’m only using solid pngs.

    problem 2. IE renders the colours wrong!!!!!!

    see: http://www.srcf.ucam.org/~dk282/new_look/test.html

    the background is #000066 and acording to photoshop the background of the png buttons (screen capture from ie, fine in moz) are #00005E

    WHY? this is realy silly. Please some one help

    Copy & paste the code below to embed this comment.
  64. eatmo - I’ve thought the exact same thing. I find it silly that MS hasn’t added that vital bit of code (it only makes sense to add it). The code’s there - they oughta put it in.

    Daniel - Unfortunately, there’s not much to do about that. I ran up against this problem about a year ago when I first started using PNGs. The only solution is to change the colors of the page - unless you feel like searching for the right color for the pic.

    Copy & paste the code below to embed this comment.
  65. Daniel: I’ve encountered this problem viewing PNGs saved out of Photoshop in IE, but I’ve also seen PNGs displayed with perfect color on IE.

    The problem arises because Photoshop likes to include extra gamma information in the PNGs it saves, in order that other people’s browsers can compensate for their own gamma and display your image just the way you intended (ie, just the way it looks on your monitor). For proper color-matching this is often vitally important, since for instance Macs used to have a default gamma much lower than PCs.

    However, IE either doesn’t recognise this gamma information or else applies it all too well - so your images appear darker and muddier. I can’t seem to find a way to get Photoshop to leave the gamma information out; Not even disabling all color-correction in Photoshop seems to do the trick (in PS7, at least). Anybody have a solution?

    Copy & paste the code below to embed this comment.
  66. Richard Rutter and Michael Lovitt have discovered opposite sides of
    the MSIE/Win bug: 32-bit RGBA PNGs show as completely opaque (Michael),
    while 8-bit palette PNGs show as completely transparent for any pixel
    (i.e., palette index) that’s not 100% opaque (Richard). Convert that
    colorpicker image to 32-bit RGBA and watch the drop-shadow obliterate
    all in its path.

    Many more gory details can be found here:

    http://www.libpng.org/pub/png/pngapbr.html#msie-win-unix

    As for Michael’s CSS background image, that may actually be another,
    recently discovered bug related to tiling of small images. There’s
    a performance hit if small images aren’t tiled into larger ones before
    rendering, and there’s apparently an even larger performance hit if
    those small images are tiled with a full alpha channel as opposed to
    binary transparency. I thought the
    magic threshold was 64 pixels in each direction, but perhaps the test
    is simply against the total number of pixels in the image—with 64x64 = 4096
    being the cutoff, and Michael’s background image having only 1000 pixels.
    Or maybe 64 in _either_ direction is the threshold. In any case, it
    might be worth retesting with a “back.png” of 80x80 pixels, for example.

    Greg

    Copy & paste the code below to embed this comment.
  67. Alun and Daniel have discovered another of the little gotchas listed at
    the URL in my previous post, namely that MSIE gamma-corrects PNGs but
    does _not_ gamma-correct HTML and CSS colors. (The latter is required
    by the spec; for HTML it is merely recommended or “strongly encouraged”
    or something.) Note that this problem will affect Mozilla, too, but
    only on non-PC (non-sRGB) systems such as Macs—see Bugzilla bug #53597,
    I think.

    pngcrush can be used as a workaround (and should be for anyone using
    Photoshop to create PNGs, regardless of gamma problems—most versions
    do really lousy PNG compression). Something like “pngcrush -rem gAMA
    -d outputdir *.png” will recompress a pile of PNGs, remove their gamma
    chunks, and dump them into outputdir (with the same names).

    Normally removing the gamma information is a bad idea, but in this
    case (MSIE gamma bugs, Photoshop 4.x and 5.x gamma bugs), unfortunately,
    it’s the best workaround.

    Greg

    Copy & paste the code below to embed this comment.
  68. Heh…I come back from 2 hours of gamma research to find Greg has beat me to the post with the pngcrush solution :) I still wish there was some way to tell Photoshop to give it a rest, though.

    Copy & paste the code below to embed this comment.
  69. Ok, so it is hacky… our site recently went through redesign and of course the designers used some semi-opacity in their photoshop comps, and we needed a solution just like this. Instead we went the more basic route, so it shows semi-opaque in some configurations, and not in others.

    RE: Flash: I suggested that too, but we don’t even want to lose the potential 3% of the world without the current flash plug-in. Of course in flash is where the designers see the semi-opacity on the web anyway….

    Copy & paste the code below to embed this comment.
  70. God, I really hate this forum format. Does anyone else hate it as much as I do?

    Copy & paste the code below to embed this comment.
  71. Hey,

    I tested this out in Konquror and it didn’t work at all.
    But konq can display png alpha correctly. :o(

    Since The new mac browser Safari is based on that code, then it may die in Safari too, which I suspect will be a bigger problem in future.

    - Kevin

    Copy & paste the code below to embed this comment.
  72. Luckily I’m not responsible for the maintenance of this website, but if I was I would utter something very politically incorrect and never bother to publish another article.

    People, if you don’t like the solution of the article for whatever reason, just post why you think the solution is flawed, but observe some basic human politness and decency in your language please.

    Would you use the same language if you would have a face to face discussion with the publishers?

    Copy & paste the code below to embed this comment.
  73. Yes, I would.

    Copy & paste the code below to embed this comment.
  74. “utilizing this work-around is a bad thing. for those who don’t utilize templates, it would be impractical to go change every page they ever made with it”

    Proper design can help avoid this problem.

    <!—head include file—>
    <% if(needsPngFix) { %>
    [removed]
    . . .
    <!—end head include file—>

    You have to sniff the ua string to detect windows IE 5.5 - 6. needsPngFix = windows IE 5.5 - 6

    Copy & paste the code below to embed this comment.
  75. Oh well, you get the point.

    Copy & paste the code below to embed this comment.
  76. Actually, the biggest flaw from my perspective is not a lack of .png browser support (because this hack, among others, can solve that for IE5.5+), but a lack of PRINTABLE BROWSER SUPPORT. Want to print .png images in IE? Good luck. Want to print .png images in Phoenix? Good luck. IE will simply refuse to print the images at all, while Phoenix (and, I assume, Mozilla) will inappropriately mess up the opacity to make it all black. Any solutions to this conundrum?

    Copy & paste the code below to embed this comment.
  77. I thought this was designing for the screen, and not for print. Wouldn’t an alternate style sheet that swaps comprable gif images for their on-screen png counterparts solve your printing “issue”?

    Copy & paste the code below to embed this comment.
  78. ...if there was a way of changing the source of an <img> element by using a css property, then yes. There are so many circumstances in which this would come in useful, but as yet there is no css property that will do this. So you have two options:
    1. Use block-level elements like <div> instead of <img>s for all your images, and assign them background-image properties. For a proper ‘content’ image this is less appropriate than an <img> tag, and causes problems with accessibility (you can have alt-text within the element and hide it, but how can you unhide it if the user has images turned off?)

    2. Include two <img> tags in your document, one for each graphical type, and hide one or the other depending on the browser or medium. Highly undesirable, as you end up cluttering the document with unused images that will show up for browsers with no stylesheet support or stylesheets turned off.

    Copy & paste the code below to embed this comment.
  79. نتانتانتاتتتتتتتتتتتتتت

    Copy & paste the code below to embed this comment.
  80. Actually, your second suggestion is exactly what I had in mind. After all, wouldn’t that be using standards-compliant CSS to accomplish the goal? Those browsers with no stylesheet support don’t need my support. Those users who have chosen to disable style sheets, have chosen to view the web as they please, I do not owe them any further customizations.

    We’re talking about catering and pandering here. We’re catering to our users when we make content king, and use CSS to separate our content from our structure. We’re pandering if we try to satisfy everyone and every browser, or just say “the hell with it” and design for the lowest-common denominator.

    So, use PNG or don’t use it. Design for screen and print separately. If you can’t do it without a hack, then you don’t need to do it; you’ve started to confuse your structure and content by that point.

    Copy & paste the code below to embed this comment.
  81. If your audience use bad browser, educate them and convince them to swap. If your audience isn’t dumb, it will. If you still wanna support bad browsers, give them what they want, and that is: binary (on/off) pixel transparency. If you can’t do it because you’re as dumb as most web designers, it’s not you’re fault. If you wanna learn. Learn HTTP first:
    http://www.w3.org/Protocols/
    Then, learn how your HTTP server works.
    We know you know you know you can.

    Copy & paste the code below to embed this comment.
  82. ...while the solution/hack/trick, whatever one may wish to call it, is legitimate by its merits, I believe it earns a two thumb response:

    Thumb One (down):
    Cited in the first post, and to use a term so eloquently used by Neal Stephenson, this solution is “crufty.” By orders of magnitude. It is also very much a throw back to the proliferation of JavaScript tricks that flooded the web in the late 90s in this readers opinion. Has anyone employed this solution in a production site as a “technology demo”? My guess is that the page weight in a table/image heavy production site might triple. Egads! That is a lot of cruft. Rivaling even Microsoft engineers and Windows NT 5.1! (Yeah that’s a stab at the pure marketing wool surrounding XP).

    Thumb Two (up):
    Merits of the solution however really surface when the idea is moved to the server side. Javascript is just not a reliable deployment methodology for this solution. Besides all the normal arguments, JavaScript may be turned off, JavaScript has accessibility concerns…, deploying this solution on the server is a much better attack. The client receives pure X/HTML and the necessity of depending on the client for JavaScript support is removed. Supporting this thought of server side deployment are the articles own cited requirements of *.gif and *.png graphics. If you’re going labor to produce the graphics, guarantee their proper use by building the page before sending it to the client. Page weight is much lighter to boot.

    Yet, in balance, deployment of the solution on the server complicates the development of the site… PHP v. JSP v. ASP v. CF ... but if your client is bold enough to listen to and accept/pay for the arguments of providing this solution, the client is bold enough to build a truly robust and scalable website. So is this thumb “up” or “sideways”? I’m an optimist… so up. Take the idea and deploy it on the server vs. depending on the client.

    My 2 pennies.

    Copy & paste the code below to embed this comment.
  83. Flash Vs PNG.
    The support is nearly the same. If a user is using IE 5 they will need to download a new plugin, If i remember right IE 4 doesnt fully support flash 6/MX. So i believe it not to be that much of an advantage. Although PNG can be imported to flash and then compressed a bit more… But then flash’s transparency only wirks in the IE version of the Flash plugin
    -Marc

    Copy & paste the code below to embed this comment.
  84. This is certainly offtopic for this discussion, but I wanted to get feedback from people here. Where do you go for online discussion, question/answer, debate of web programming and design topics? There used to be a set of general forums here, but those seem to be long gone. I’m leaving a good sized development company and going to a two man operation so I won’t have the same resources to ask questions (and give answers). Where do you go to get help and to satisfy the urge to answer other’s questions?

    Nate Baxley

    Copy & paste the code below to embed this comment.
  85. As echoed in other posts here, and also relevant to CSS (as well as all webstandards), I must say this: we, as the web dev community, must stop allowing ourselves to be bullied about by lazy browser makers.

    Every hack we develop and propagate allows the non-compliant browsers to remain and continue to be complacent about releasing on-spec and non-buggy software.

    While certainly unnaceptable for bigger commercial projects, I truly believe it is time for us, as a group, to develop sites that are standards compliant without hacks. It is absolutely possible to create great designs that are 100% on-spec. Does this mean some browsers are left out? Yes. But we’ve done that before (buttons that say"designed to be viewed with”), and Zeldman has long been trumpeting the approach (detect bad browser, redirect to polite and clear message as to why).

    Case in point: IE’s actual worsening of PNG support. IE5.0 did alpha channels perfectly! Why kill it? And why should we have to hack for something that should be 100% supported by now? Both PNG and CSS1 have been around since circa 1997… and we still are hacking! Why? Becasue we are still hacking.

    Let us stop hacking, or else we will forever have to. If enough sites use alpha-transparent PNGs and valid CSS which doesn’t render properly in IE6, and we state our case clearly enough, often enough and to the right people… what do you think could possibly happen? Something as small as a 5% shift in browser dominance back to Mozilla and I guaratee you Microsoft will take notice…

    Just a thought.

    Copy & paste the code below to embed this comment.
  86. I am amused at all this bickering. Half of you seem to think that using the hack will encourage better implementation of png standards because your using png, while the other half seem to think that using hacks discourages better implementation because the browser developers might conclude that we don’t need better implementation if we can use hacks. AHHHHHH! My head is spinning. (Ok, so I simplified your differing arguments but the basic concept is there)
    The fact is, both arguments are correct to some degree or another. So that is not really the issue. What it comes down to is what your client wants - a really cool looking site or a widely accessable site. And if they want both, they’ll have to pay up.
    Even if the client is willing to pay up, I will have to agree that many of the so called solutions suggested here result in some ugly sorce code. That it why I agree with the few who have suggested a server side solution. Your client has already agreed to pay up, so why not? And the visitors are non the wiser. I would be inclined to think that as standards improve/change (who said all changes are improvements?) it would be easier to modify a server side solution than many of the workarounds mentioned here.
    For those who are not interested in reaching everone, that’s fine. Use whatever you feel like and ignore the rest. You have that right. Just don’t expect everone else to follow you. Why should we? Your not. The point is, don’t degrade others just because you don’t like their solution. They may not like yours either. The differences in browsers is evidence of that.
    I guess what I’m trying to say is: just don’t critize others. Offer your suggestions and why you use/like them. When eveyone does the same, this forum will offer a wealth of suggestions that you can weed through to find the solution that works for you. The bickering just makes it that much harder for those that are still unsure of where the stand. Let them form an opinion based upon their experiences, not your venting.
    Ok I’m going to stop now, before i negate my argument by failing to follow my own advise (hope it’s not to late).
    Thanks for listening.

    Again, my suggestion is server side code that serves up clean X/HTML that works in that particular instance. If the client is not willing to pay for such a solution, then they get only one of two options: pretty pages or accessible pages. Plain and simple.

    My 2 cents (ok, maybe 4).

    Copy & paste the code below to embed this comment.
  87. Surely everyone’s missing a trick here - we’ve got onto just talking about generation 5+ browsers - in fact, how to enable - variable transparent pngs. Given that every other browser in the world will ignore the IE only filter: attribute to a class style, why can’t you just use pngs, and apply the transparent style to every class defined - eg:

    <style>
    .apng { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(...) }
    </style>
    </head>
    <body>
    aphoto.jpg
    apng.png
    ...
    </body>
    etc etc

    Now - in every browser other than IE the filter:.... in the stylesheet will be ignored, but that’s okay because gen5+ browsers other than IE will support the variable transparency. And in IE where this isn’t supported, the filer: will be picked up and give all images with class=“apng” a level of transparency.

    That leaves only the older browsers that don’t actually support png at all to deal with - and a simple javascript function to go through each img in the DOM and replace it with a .gif (same name, different extention) is a nice easy “fix” to implement.

    Does that make sense, or am I talking c*** again? ;o)

    Sam

    Copy & paste the code below to embed this comment.
  88. ...not quite, unfortunately. There’s two problems: 1) The source of the png has to be explicitly specified in the filter, so you’d need unique CSS rules for each png you use, and 2) the filter is applied ‘behind’ the image element (kind of like a background-image), so the original unfiltered PNG will still be drawn over the top in all its untransparent grey-matted glory.

    Copy & paste the code below to embed this comment.
  89. Yeah, I realised that just after posting, but I guess you could use the alpha filter to give a pseudo effect in IE - okay, it won’t be great, but it’s one option….. :o)

    Sam

    Copy & paste the code below to embed this comment.
  90. It’s a poor option. Your only real options are as follows:
    Use gifs and get over it.
    Use pngs and tell your users to get over it.

    Otherwise, you are tying yourself in knots over a graphic problem that really isn’t a problem at all. It’s an possible choice with limitations. Accept the limitations, or choose something else. This isn’t really that complicated.

    Copy & paste the code below to embed this comment.
  91. Why not just use youngpups Sleight, eh?

    http://www.youngpup.net/?request=/snippets/sleight.xml

    Copy & paste the code below to embed this comment.
  92. Now I got a little question about the png itself. Is there anything special about it. Because something really strange is happening when I try to use this workaround on my site. When using the png provided with this article, there’s no problem, everything works (in both IE and Mozilla). Now when I use my own png, made in Photoshop, suddenly, every hyperlink situated on that background stops to work. What I mean is that you can’t even click on it, it just looks like plain text. This only occurs in IE, not in Mozilla. Does it have something to do with the % of transparency (in my file png it’s 56%).
    This is really odd, and I don’t understand it.

    Copy & paste the code below to embed this comment.
  93. I have been using Fireworks MX to render all my GIF files and I use a lot of transparent files. The only way to make them render correctly, in regards to the original PNG, is to use Alpha transperancy in the Export Preview Document Window. If I use anything else it doesn’t render transperancy correctly. Am I missing something when you guys say GIF doesn’t support Alpha Transperancy. I know that PNG is the Master Document in Fireworks but It does give me the option of using Alpha in GIF files. And this works the same as if I had exported everything in PNG format for the most part.

    Check out this site… http://www.hooflungpoo.us as it uses ample transperancies with alpha option in Fireworks.

    Is what I am doing in Fireworks anyway related to what is being discussed here? Or is it just a misuse of terminology by the application?

    thanks,
    Mike

    Copy & paste the code below to embed this comment.
  94. Who cares if it is a hack? Really, what difference does it make?

    If the above statement is way out of line, excuse me, I am a junior web designer and in the very real likelihood of not knowing what I am talking about.

    Copy & paste the code below to embed this comment.
  95. Boris Anthony wrote: “Case in point: IE’s actual worsening of PNG support. IE5.0 did alpha channels
    perfectly! Why kill it?”

    IE 5.0 _for Macintosh_ did (does) alpha perfectly, aside from table and page background
    images that are smaller than 64x64. MSIE for Windows never has—unless
    you count the cheesy ActiveX filter hack that’s been discussed here ad nauseum, or
    (possibly) some anonymous PNG plug-in that’s never been identified.

    Copy & paste the code below to embed this comment.
  96. PNG has been around for long enough, if ppl can’t see them it’s their fault..
    Just go PNG all the way..

    Copy & paste the code below to embed this comment.
  97. Anyone know what level of PNG support does Apple Safari (khtml) have? What would need to be done in order not to leave it all? (I noticed that the browser detetion code does not include Safari)

    Copy & paste the code below to embed this comment.
  98. While I applaud browsers like Mozilla and Opera in their attempt to standardise and make our web designing lives a pleasure, Microsoft who have the browser majority continualy fail to comply forcing the growth of web design to slow down. Whilst I try my best to comply with standards, I am often forced to code workarounds for IE/PC simply because it’s what most people will view my sites with.

    Copy & paste the code below to embed this comment.
  99. I think most people would agree that if all browsers properly supported the PNG format, we could avoid hacks, and that would be good for everyone.

    To that end, you may want to politely encourage Microsoft to do this in IE via their product feedback page

    http://register.microsoft.com/mswish/suggestion.asp?from=cu&fu;=/isapi/gomscom.asp?target=/mswish/thanks.htm

    or the Microsoft MSIE 6 Beta feedback site

    http://131.107.85.107/ie6beta/ie6bugreport.htm

    And, if you missed it, there’s also a petition supporting said improvement

    http://www.petitiononline.com/msiepng/petition.html

    Speak up and spread the word - and there won’t be a need for hacks.

    Copy & paste the code below to embed this comment.
  100. I think most people would agree that if all browsers properly supported the PNG format, we could avoid hacks, and that would be good for everyone.

    To that end, you may want to politely encourage Microsoft to do this in IE via their product feedback page

    http://register.microsoft.com/mswish/suggestion.asp?from=cu&fu;=/isapi/gomscom.asp?target=/mswish/thanks.htm

    or the Microsoft MSIE 6 Beta feedback site

    http://131.107.85.107/ie6beta/ie6bugreport.htm

    And, if you missed it, there’s also a petition supporting said improvement

    http://www.petitiononline.com/msiepng/petition.html

    Speak up and spread the word - and there won’t be a need for hacks.

    Copy & paste the code below to embed this comment.
  101. Hrrm this is all very interesting. My goal is good looking design that validates. I tried out YoungPup’s Sleight and it seems to work well and leave my code valid; however, I am noticing a drag on page load time. It also doesn’t work with pngs that are called in as DIV backgrounds via CSS, since it relies on the <img> tag as a trigger. Is there a way to adapt it for all pngs, regardless of origin?

    Copy & paste the code below to embed this comment.
  102. Hi,

    is there a way to generate a transparent printout of a text with css? My site should be printed out with a semi-transparent watermark from top to down. I cant use an image as watermark because the text has to be generated with asp. It prints the site correctly, but the watermark isn’t transparent. here my code snippet:

    <div tb-rl; filter:Alpha(opacity=25); z-index:2; osition:absolute;”>** dynamic generated text **</div>** rest of the site **

    Is there a way to print the transparent text correctly?

    Highmad

    Copy & paste the code below to embed this comment.
  103. This might start in a pessimistic note, but.. I think we all know we’ll never be able to do 100% cross-browser CSS/DHTML+PNG.
    Browser detection was dead before it was born. Object detection helps but still doesn’t solve everything - and having a browser that’s all standards compliant is like wishing the US finally would be able to switch to the SI system..

    One thing that bothers me was the basic concept of the article (still remember :), using graphics to display *text*. I just don’t get it..

    Copy & paste the code below to embed this comment.
  104. Hi,

    is there a way to generate a transparent printout of a text with css? My site should be printed out with a semi-transparent watermark from top to down. I cant use an image as watermark because the text has to be generated with asp. It prints the site correctly, but the watermark isn’t transparent. here my code snippet:

    <div tb-rl; filter:Alpha(opacity=25); z-index:2; osition:absolute;”>** dynamic generated text **</div>** rest of the site **

    Is there a way to print the transparent text correctly?

    Highmad

    Copy & paste the code below to embed this comment.
  105. I just went through all of the linked examples in the article and thread. Was delighted to see that, from a cursory look only, the new safari browser is supporting png with 8bit transparency.

    (there was no mention of safari in the article, so I just HAD to look.)

    Copy & paste the code below to embed this comment.
  106. Safari (which was released after this article was published) supports png alpha transparency.

    Copy & paste the code below to embed this comment.
  107. How come the source crashes the browser?
    i do not see anything wrong with it..

    Copy & paste the code below to embed this comment.
  108. Too many workarounds and miles of trivial knowledge. Everything needs a hack, even CSS layouts. I’ll just going to wait till the browsers get it right and keep to the things that work. Maybe a little hack here or there but come on, implementing java and all these things, blargh. Give me something that I can work with. This site is like Donald Rumsfeld, I can’t get a simple answer from it.

    Copy & paste the code below to embed this comment.
  109. argh!

    new content!

    Copy & paste the code below to embed this comment.
  110. Say please. :p

    Copy & paste the code below to embed this comment.
  111. Yeah, Safari works great for a beta. I can’t wait for its final release. It supports standards well so far, and it’s only getting better. And it even displays the PNG used as the background of a DIV correctly! Yay!

    Copy & paste the code below to embed this comment.
  112. Some images exported as PNG 8 with Fireworks MX to Dreamweaver layout window appear with the color changed, sometimes even rendered with the letters pushed to the left midway in the image’s canvas, blackened out, and illegible. If the canvas is white in Fireworks, some of the .png colors always appear changed; if the canvas is, in addition, transparent, the letters are damaged; and if some glow or effect is applied, the image appear pushed to the left midway in the canvas. the Images with fonts exported as .gifs appear correctly. All the .png images in the page previewed in Netscape and IE appear normal.

    The point is that browser support is good. In IE6 the PNG appear with just the right color. Dreamweaver layout window shows (surprisingly) PNGs with wrong color.

    Copy & paste the code below to embed this comment.
  113. I think the best work around is to use IE’s conditional comments. It may be a hack, but it’s not dangerous because other browsers will only see a standard “<!——>” comment. Plus, it’s much cleaner than browser-detecting javascripts.

    Copy & paste the code below to embed this comment.
  114. The biggest problem with png is the size of the end-file. Gif and Jpg can do a great job if well used. I should agree with others that png is good choice for use with Flash.

    Copy & paste the code below to embed this comment.
  115. Yes it’s a hack, but does every single issue of ALA have to be about standards and cross browser design?

    The web is an amazing media rich place. Who said every website had to be accessible to everyone, every browser and every electronic device with a view screen? I honestly couldn’t think of anything worse. Sure, compatibility makes sense for business and government sites but what about the artistic side of the medium?

    I for one am glad that ALA isn’t pushing these areas of the web under the rug and I encourage its writers to fuss over such menial details in order to help us unlock the potential of the web for creative expression more often.

    However, I’d personally like to see a little research done into the gamma correction in PNG’s. I for one would really like to know why the same 32 bit PNG’s display darker in IE 5.5+ PC compared to other browsers and to an identical JPEG image displayed in the same browser. Furthermore, I’d like to know why Opera appears to display PNG’s transparent areas as slightly less transparent than other browsers do.

    Copy & paste the code below to embed this comment.
  116. My question : why is the use of proprietary code being put forward on alistapart when it’s central tenet is forward compatibility?
    The use of MS’s DX code runs against the grain of providing cross browser platform code to our site visitors and should be avoided at all costs.
    A solution, among many others I’m sure, to the PNG issue with our “forward compatibilty” hat on would be to push your site visitor to follow the browser upgrade path outlining the benefits it will bring… I know that this sometimes might not be possible but it’s a damn site cleaner than using XYZ corps code for XYZ browser.
    Pushing propietary code on pages whether it be IE, Mozilla, Opera or whatever is not the way to massage changes in the browser builders. Rather, it lets them sit on their laurels.

    regards, James

    Copy & paste the code below to embed this comment.
  117. Aww, but James, standards are so, like, *hard*. Why can’t we just use WYSISWYG and be done with it? Why should we have to do things correctly, and actually act like we’re working on a huge fucking global computer network when we can just pretend that “speaking” the same language of standards isn’t necessary? It’s just so much easier not to think…

    Copy & paste the code below to embed this comment.
  118. This article is dated 21st December. How much Christmas Holiday do ALA get, eh? ;)

    Copy & paste the code below to embed this comment.
  119. Making a design, is cool. So, naturaly you would like most people to get it right.
    I, though, have never understood the meaning of making all the exeptions!

    Put a W3-validated image on your site, and let people know their browser suchs!

    Wanna go on a Safari with me??? Get a Mac…

    Copy & paste the code below to embed this comment.
  120. I HAVE NO COMMENTS!!!

    Copy & paste the code below to embed this comment.
  121. Have ALA left us?? Such a long time with no new articles…

    Copy & paste the code below to embed this comment.
  122. I’m using the AlphaImageLoader trick to create transparent backgrounds for some large table. I’ve noticed that from a remote location pages using it take ages longer to finish loading. Are the images loaded in this way not cached?

    Copy & paste the code below to embed this comment.
  123. ... but none of these solutions work for me. I’m using IE 6 SP1 on Win NT and I either see the PNG with an opaque background or (if the solution substitutes a blank gif for the image) nothing at all. I’m thinking just a simple switcher so that IE/Win gets a (very ugly) GIF and everything gets the PNG is the only thing that’s going to work for me.

    Copy & paste the code below to embed this comment.
  124. In my testing, it looks like you can get variable opacity PNGs to work as background images in IE5/Mac, but you have to use “background-repeat: no-repeat”.

    Obviously, that limits your options considerably.

    Copy & paste the code below to embed this comment.
  125. Safari has full support for images that are supported by Mac OS X, like TIFF, PDF, PNG, ...
    If you type a URL that ends on .pdf it will download automatically. PDFs are viewable in Safari with:
    image.pdf

    Copy & paste the code below to embed this comment.
  126. Help. CSS filters don’t work on my browser (IE 5.5) but they should! How can I fix this (please e-mail me)

    Copy & paste the code below to embed this comment.
  127. Hey gang,

    Just a few comments. Why is everybody bothering with javascript? I’ve found two CSS2 compliant ways to use alpha transparent PNG’s. Both examples work in IE5/Mac, IE5.5+/WIN, Moz, Safari and Opera.

    Check it out:

    http://martin.madocke.net/Testing CSS/PNGOpacity.html

    Greetz,

    Martin van Dijken

    Copy & paste the code below to embed this comment.
  128. The reason for all the JS is because the CSS you used on that page is invalid (an we all try to use valid HTML+CSS here).

    Errors
    URI : http://martin.madocke.net/Testing CSS/PNGOpacity.html
    Line: 19 Context : .png
    Invalid number : background-image[removed]‘none’) is not a background-image value : [removed]‘none’)

    Line: 21 Context : .png
    attempt to find a semi-colon before the property name. add it

    Line: 21 Context : .png
    Property progid doesn’t exist : DXImageTransform

    Line: 23 Context : .png
    Parse Error - DXImageTransform.Microsoft.AlphaImageLoader(src=‘bird_shadow.png’,sizingMethod=‘crop’);

    Line: 31
    Parse Error - :300px; height:300px; background-color: blue; } .png2

    Line: 34
    attempt to find a semi-colon before the property name. add it

    Line: 34
    Property progid doesn’t exist : DXImageTransform

    Line: 34 Context : sizingMethod
    Parse Error - .AlphaImageLoader(src=‘bird_shadow.png’

    Line: 36 Context : sizingMethod
    Parse Error - sizingMethod=‘scale’);

    Line: 40
    Parse Error - :50%; height:40%; } .png2 img

    Line: 43
    Invalid number : display[removed]‘none’) is not a display value : [removed]‘none’)

    Copy & paste the code below to embed this comment.
  129. Tried the example page at work with IE6. Nothing, no translucency. Perhaps it was the browser detection code.
    I’d also like to emphasize this filter only works with IE5.5, not IE5, so for those trying a truly cross browser solution, there is not much one can do.

    Personally, being a vindictive person not in charge of any major sites, I just use PNGs and cackle when the RGB translucencies transform into white backgrounds in IE. Occasionally leave a note on the page that if it looks ugly, it is their browsers fault.

    Obviously not a solution for most, though.

    Copy & paste the code below to embed this comment.
  130. Tried his example in IE6 too - ended up with off-white background to bird shadow on blue square, and similar with larger shadow below it.
    It *did* work fine in Mozilla, but then, that’s the easy part.

    Aside from invalid CSS, the idea itself doesn’t seem to be working.

    Copy & paste the code below to embed this comment.
  131. While playing around with this hack, I stumbled across a much tidier way around the transparency problem, which works in Opera 6,7 NS7, IE6. I’m not sure about IE5 and Macs, but I can’t see why it wouldn’t work (if anyone can help then let me know)

    anyhoo, this is what you do.

    You make a div with the following example

    <div id=“logo”  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/logo.png’,sizingMethod=‘scale’);”></div>

    Note the ‘background-image=none’ bit!

    Then in your CSS sheet you add the following

    #logo {
    height: 114px;
    width: 243px;
    background-image: url(../images/logo.png);
    }

    This seems to give you proper transparancy on your png’s unless you’re using an older browser that doesn’t support pngs, which is likely to be a non-css2 compliant browser. If you then combine this with the technique descibed at http://www.thenoodleincident.com/tutorials/typography/index.html using 2 stylesheets for the different versions of browsers, you should get a pretty good chance of your images looking right and with no use of JavaScript what so ever.

    Dom

    Copy & paste the code below to embed this comment.
  132. Ok, I’ve incorporated the AlphaImageLoader filter/hack into all the .png’s on my website, but try as I might I can’t seem to incorporate it into a simple rollover. All the previous posts are for static .png or background images, but does anybody know of any way to swap images using that filter on BOTH states of the rollover? Perhaps there’s a better way altogether to go about this problem that I don’t know about. Any help would be greatly appreciated….

    Copy & paste the code below to embed this comment.
  133. I’ve just tried the Microsoft filter technique out on my church site, and it extends support to IE5.5 perfectly. I use conditional comments to hide the IE-specific style sheets, which allows the real CSS to validate.

    http://www.billericaybaptistchurch.freeserve.co.uk/

    I realise this is a hack and may need tweaking when IE7 comes out, but it’s great for the time being.

    Copy & paste the code below to embed this comment.
  134. Dom Scott:
    That hack is just wonderfull.
    Was just what I was looking for. Works perfectly inside tables and div tags.
    Which is just what I need =)
    Good job =D

    Copy & paste the code below to embed this comment.
  135. Well.. I ran into a little problem..
    For some reason links dont seem to work, very well when using the AlphaImageLoader. Infact, only links close the right border and bottom works for some really odd reason.. =/

    Copy & paste the code below to embed this comment.
  136. A friend came up with the design idea for the web site above. A div with a transparent background over the main page background. I’ve sucessfully implemented this “hack” to allow the transparency of the .png, which is simply a semi-transparent box of the div background color.
    However as soon as I use this code to get the transparency to display, the scroll bars of the div become disabled to click and drag. However I can still scroll in the div with the scroll wheel of my mouse and the bar moves. I’ve searched online in several forums and google and found no mention of this problem.

    Any advice in the form of reply posts, or emails to me, would be greatly appreciated.

    —wynnesome

    Here’s the code defining my div with the bg image. The rest of the properties of the div are defined in a stylesheet however overriding that and defining the position within this line of code resulted in the no change to the problem.

    <DIV ID=“text”  src=‘images/textbox.png’);” >

    The result can be viewed at the above url.

    Copy & paste the code below to embed this comment.
  137. Adding to the previous post…

    Any <a href=”“> links placed on the transparent background don’t work either. They’re underlined but they don’t function.

    Copy & paste the code below to embed this comment.
  138. I feel strict adherence to web standards is necessary. Imagine writing a program in Java or C++ for a computer/compiler that behaves like the IE browser does. You could not possibly expect the program to function the way it should. This is insane.

    The only reason any web designer should even have to think about using these “hacks” is that IE is the most popular browser. Unfortunately most users use this crummy hack and slash browser. Everyone needs to migrate to Mozilla or some other browser that strictly adheres to the standards.

    Copy & paste the code below to embed this comment.
  139. I had this problem too when I tried to use a background tile of 32x32 pixel (WindowsXP / IE6).
    Then I took a tile of 800x2. With that the links in the lower part of the div were accessible. With a tile of 800x1 all links were accessible.
    Does anybody has an explanation?

    Copy & paste the code below to embed this comment.
  140. The problem in all of these methods is that they use Javascript (which won’t work with IE set on high security), do not allow for proper [img]TEST.PNG4XBcHJm64DJJeO90OAfqpd3t6myhon3otypography_img_src_end
    width=“298” height=“202”
    alt=“This is a test”> markup (ahem, Michael that includes your own proposal), rely on server-side sniffing (fails with proxies) or simlply dismiss the issue (use flash or not use it at all because its a “hack”).

    But the following code is fully html compliant, structurally correct, needs no Javascript and tests finely on IE, IE set on high security, Opera and Mozilla:

    <span display:block;
    width:298px; height:202px;”><img [/img]</span>

    Instead of using normal filter:alpha(opacity=0) I worked with the more esoteric DirectX attribute. Why? Because the trick works only if neither or both attributes are supported. And some browser maker might choose to support filters without ever supporting DXImageTransform.Microsoft…

    Panos

    Copy & paste the code below to embed this comment.
  141. I have implemented the hack described in this article in some ASP.NET Web Controls (http://sean-janus.optionpc.com/me/software/PNGHack/). Using PNGHack allows you to avoid sending proprietary markup to decent browsers and it doesn’t clutter your web pages any more than a regular img element.

    Copy & paste the code below to embed this comment.
  142. I admidt I’m quite happy that this hack (not solution, i agree) exists. But it is still sooooo damn uncompfortable, especially the fact the the path needs to be an absolute one, relative paths don’t work. I hate Microsoft so bad for all the mess they are causing!

    Copy & paste the code below to embed this comment.
  143. There is a way to display the PNG without JavaScript.
    Create a DIV which displays the PNG in Microsoft.
    Define a IMG inside the DIV, to display it in normal browser, and disable that for Microsoft, using a fully transparent 1x1 picture.

    This is the result:
    <div height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘test.png’)”>
    test.png
    </div>

    Copy & paste the code below to embed this comment.
  144. It should be noted that IE 6 is basically the only browser these days that *doesn’t* support PNG properly. Mozilla/Netscape for Windows does. Opera for Windows does. Safari, Camino, Mozilla, Omniweb, Netscape and Internet Explorer for Mac all support it. It’s hardly ‘not supported’ as some people believe.

    Copy & paste the code below to embed this comment.
  145. Here’s another hack I came up with that utilizes a few of win/ie’s CSS bugs.

    #content {
    background: #e0e0e0;
    voice-family: "\"}\”“;
    voice-family:inherit;
    background: transparent;
    }

    html>body #content {
    background: url('back.png');
    }

    The initial background value is for win/ie 5.0 and earlier, which doesn’t support the AlphaImageLoader. It will render a solid colored background on the div. One downside is that 5.5, which DOES support the AlphaImageLoader, will end up with a solid background. It was either degrade the rendering in 5.5, or make it totally unreadable in 5.0.

    The second value is for win/ie 6.0, which ignores the Tantek Hack, renders the div as transparent, and doesn’t recognize the html>body attributes.

    The third value is for every other browser, which renders the div normally; with a png. I use an exceedingly large png with no tiling, which allows ie/mac to render it correctly (this wastes a few kb of downloading, but I consider it an acceptable loss).

    In the actual html, I simply use

    <div id=“sidebar”  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘back.png’,sizingMethod=‘scale’);”>

    All non-ie/win browsers read the div id and ignore the AlphaImageLoader. ie/win reads the whole thing, including their hacked css tailored for their quirks.
    This method slightly mangles your CSS and puts the unsightly AlphaImageLoader in your divs, but it requires no javascript, and should render correctly in every modernish browser but win/ie 5, which simply renders it with a solid background. Not pretty, not Standardâ„¢, but it gets the job done.

    Copy & paste the code below to embed this comment.
  146. The code of “Floating Translucent Div with HTML Text inside” of Michael Lovitt uses a moving layer “mydiv” as a translucent rectangle defined between the style-tags. I wonder if it is possible to use a image *.png instead of this rectangle. Could anyone tell me if this is possible and if so what code I should use for this?

    Kippie

    Copy & paste the code below to embed this comment.
  147. Ok so heres my crack at specificly _why_ IE doesnt support alpha transparancy PNGs. I doubt anyone even reads this anymore, but Ill only be morally satisfied if I say it somewhere. So it goes like this. Compuserve, or whatever company created the .GIF format (I cant remember) did that thing where they were going to get royalties for personal website use of the .GIF format, but it died. Instead, they made companies like Adobe pay them money to have their programs support the format.

    From here, conclusions should be obvious.

    Basicly all programs support the .GIF format. I bet Compuserve, or whoever it was that created .GIF, charges _hella_ bills for these progs to support it. as the article said, these fees are inevtably charged to the end user. Nyway, whats happeing is this: Compuserve wants the .GIF format to stay around, cause they get paid for it. Unfortunaly for them, the .PNG format comes out, and they are screwed cause its way better than .GIF. But they make a deal with Microsoft, and hence IE for windows, the most popular browser by a long shot, doesnt support the .PNG format, effectivly rendering it useless for web design. This perpetuates the use of the .GIF format and Compuserve keeps on getting paid by Adobe and all those other compaies because they have to keep supporting it. They only have to support it because IE doesnt support PNGS.

    To make a long story short, Microsoft is getting PAID to not support the .png format in IE for windows. Its sadly true that removing .PNG support in one browser can kill, or at least suffocate, a vastly supireor format.

    I am not saying here that we should all say “to hell with Microsoft, Im using PNGS!” Thats useless, they dont CARE what you think. Truth is, the web development community is not ever going to be unified enough to change Microsofts position on .PNG support, not as long as Bill Gates still gets paid one fucking dollar for not supporting it. Microsoft would rather hold up the future than loose any kind of money whatsover, and in true euntrapanurial spirit they are doing just that with the .PNG. Its a pretty intricate plot, but I dont think my reasoning is flawed here. Ill continue to use .PNG’s. I dont know how, I have to find some reliable way to have IE show them properly as the BG of a div, and none of these examples seem reliable. But Ill keep trying. Fighting Microsoft is like fighting a huge pile of crap. Even if you could kick it around, you would just be getting crap all over everything.

    Copy & paste the code below to embed this comment.
  148. I want to make a text field background transparent but Safari does not seem to recognize style{background:transparent;} or even style{background-color:transparent;}. Does anybody know how to do this so it will work on all Browsers

    Copy & paste the code below to embed this comment.
  149. Want your 32bit PNG images with transparency to display normally on browsers that support them, but still work on IE? Read this:
    http://phoenity.com/newtedge/png_degradability/
    Please note that this applys to 32bit only!

    Copy & paste the code below to embed this comment.
  150. Although I consider myself to be very good at JavaScript, I don’t like to use it if I can avoid it, especially if it means the content will be invisible if JavaScript is not supported, so I prefer to use CSS with CSS wherever possible or HTML if CSS is not available.

    How about this for a solution. Use IE’s filters against itself. Any browser that does not understand the variable transparency will do whatever it does with a variable transparency image. Browsers that do understand it will show it, and IE5.5+ will apply the variable transparancy using the alpha image loader, and will make the original image fully transparent, so you can see the alpha one. No JavaScript, no dependence on CSS (IE5.5+ will degrade by showing the image with no alpha), no conditional comments, nothing special.

    <div >varyAlpha.png</div>

    Copy & paste the code below to embed this comment.
  151. Tested it on IE6/WinXP, works fine, I like the idea.

    Copy & paste the code below to embed this comment.
  152. Tarquinwj’s solution seems to display in IE 5.5+, Opera, Mozilla Firebird, Netscape 7, IE 5 Mac. This makes me happy.

    I would love to have the confidence to start using PNGs like those who only design for the Mac community; a great example is the site for Mac-based app CSS Edit: http://www.macrabbit.com/cssedit/

    Copy & paste the code below to embed this comment.
  153. Some great methods here. I have tested the CSS-based solutions and they work fine for me in IE6/SP1 and IE5.5/SP2.
    BUT I can only get them to work in non-optimised PNG files produced in Fireworks. That is, I create a PNG image (eg text with a drop shadow) in Fireworks and use that file (32 bit alpha transparency) in the CSS. Problem is, those images are quite large. If I export as an alpha transparency (8 bit) - then the images work fine in Mozilla, Camino, but do not display correctly with the IE fix. Have I missed something? Is anyone else having this problem? Any solutions?

    I referred to this article at Macromedia http://www.macromedia.com/support/fireworks/ts/documents/transparency_fw3.htm

    Ricardosan

    Copy & paste the code below to embed this comment.
  154. I want to get the same effect of varying the image opactiy in MAC machine as i am gettin in win.please give me some suggestions if u can.

    Copy & paste the code below to embed this comment.
  155. I propose in the link above a very simple solution for displaying PNGs correctly in all browsers, using the minimum JS (none) and CSS (just 5 or 6 extra lines). Basically consists on exploiting a IE only bug:

    /* IE-ONLY */
    * html body div#header img {
    visibility: hidden;}
    * html body div#header {
    height: 50px;
    background: #666699;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='ThinkDifferent.png',sizingMethod='image') progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='header.png',sizingMethod='image');
    }

    on this markup:
    <div id=“header”>
    /images/header.png
    </div>

    See the link for details

    Victor

    Copy & paste the code below to embed this comment.
  156. Actually the hack presented is very useful, for certain situations. I already make us of it in most of my code and I will definitely switch to PNG completely. Still, it’s simply pathetic to see that Microsoft people don’t _want_ to support such a simple and excellent graphic format the normal way. Probably if they support it with proprietary extensions, most web designers will use it without regard to other browsers therefore they will render correct PNG support in other browsers useless and IE will be found better and better by the ignorants. I hate it..

    But I digress. My problem is that when I use this hack, elements _inside_ the div with the PNG background don’t receive mouse events anymore! One of the most important problems being that links inside become unusable. Anyone having a solution to this problem?

    To push the level of a stupid implementation to it’s maximum, if we have a select box _below_ the div (div having a higher z-index), this select will appear above the div (okay, it’s a common problem, though latest versions of Mozilla seem to avoid it) and it _will_ receive events!!! I double-hate it… In 2 years of working with cutting edge standards I found IE/Win to be an impediment for the evolution of web technologies. It’s popularity is judiciously used to discredit other browsers, so because other browsers respect web standards, IE cannot do this. And you’ll keep seing pages that say “IE required”. And people will keep buying Windows because the browser that renders the web only runs there. It’s a never-stopping money-for-nothing machine.

    Copy & paste the code below to embed this comment.
  157. this was maybe the first time i have done something on my own site, and then read about it on a standards page….  but, here is what i came up with not too long ago http://68.84.49.90/mt/archives/000008.html
    employed on http://www.mhulme.net

     

    Copy & paste the code below to embed this comment.
  158. Meaning, you can just include your images the usual way, as if IE would know PNG:

    image.png

    and load a 700 bytes JS file at the end, before closing the <body> tag.  The script will patch the <img> elements, if it runs in MSIE for Windows.

    Copy & paste the code below to embed this comment.
  159. http://dynarch.com/mishoo/articles.epl?art_id=430

    ... and yes, I hate this forum implementation too.  Mine sucks also, but it’s not used to a such extent so I’m not yet motivated to come up with a better one..  8-)

    Copy & paste the code below to embed this comment.
  160. very impressive…NOT

    after reading the article i find that the examples are not transparent at all!

    do i have the wrong browser? (IE5/win)
    i thought the whole point was to get PNG’s to be browser independant.

    Copy & paste the code below to embed this comment.
  161. As stated on MSDN ( http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp ) the AlphaImageLoader filter is only available in IE5.5 or later.

    Therefore, yeah, my script doesn’t work with it.  Many other things don’t work with it too.

    Copy & paste the code below to embed this comment.
  162. IMHO people shouldn’t use web browsers that are obsolete.  If MS falls behind the demands of greater technology <cough cough smirk> than perhas we shouldn’t use IE, and all the fools who use crap browsers can see crap web pages.  I guess if you’re a pro web designer, you can’t really write this off, but this is garbage.  7+ years of PNG, and we have to use hacks for MS’s browser to display a transparent image properly?  One of the many reasons I haven’t paid for anything MS outside of a few games, since DOS.

    Copy & paste the code below to embed this comment.
  163. I was just re-reading this article today and many have made some great contributions in the discussion. Surfing from one suggestion to another, I came across Drew McLellan’s solution (actually an alteration of youngpup.net’s) - a very tidy JavaScript that seems to make the whole IE PNG support issue disappear.  I recommend, found here:

    http://www.allinthehead.com/retro/69

    Copy & paste the code below to embed this comment.
  164. Tested quickly in IE5 & 6, Opera 7 & Mozilla Firebird all on Win 2000.

    Pro:

    Copy & paste the code below to embed this comment.
  165. Delivers a 50% transparent png across browsers without resorting to script.  The con is that IE sees the png 50% lighter than png24-happy browsers.  Potential to resolve this with further filters if important.

    css selector
      {
    background-image: url("example.png");
    background-color: transparent;
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
    }

    um, that’s it…  try out the files at: http://www.vgfx4.com/examplePNG.zip

    Copy & paste the code below to embed this comment.
  166. Give browsers what they deserve:
    http://www.pixy.cz/blogg/clanky/cssunderscorehack/
    .class {
    background:url(nicepng.png);
    _background:url(uglygif.gif)
    }

    and a link to http://www.tbray.org/ongoing/When/200x/2003/07/17/BrowserDream with style=“visibility:hidden;_visibility:visible”

    Copy & paste the code below to embed this comment.
  167. i tried out some png variable opacity for my site’s redesign, and it should look fine in most browsers/platforms.

    check it out at http://www.inthegray.com

    Copy & paste the code below to embed this comment.
  168. If your product already controls 102.6% (or the latest percentage being thrown about) of the market then would YOU add features?

    Doesn’t make sense for MS to fix IE unless it starts losing market share.

    Copy & paste the code below to embed this comment.
  169. i know use, and apply hacks daily at my job as a web developer. back in my college days circa 2001, i had to make this course database engine with PHP, Oracle, and some godforsaken CSS that I couldn’t touch. The backgrounds changed by semester (ie 01 02 03….) and the whole color scheme rewrote itself. The designer asked me to make a .PNG work in IE so noone had to keep remaking the .GIF background color to match.

    > Solution: use PHOTOSHOP and set the .PNG setting in ‘save for web’ WITH transparency, but all in 8-BIT color or less. This means your image will be ugly, if you didn’t hand craft it.

    It should be noted variable transpareny works in IE with .PNG’s in 8Bit or less color and under a certain file size.(10K i believe).

    Copy & paste the code below to embed this comment.
  170. Hey, how about making the examples XHTML-ready? That means;

    * drop the langauge=“javascript” attribute from [removed] elements

    * put element and attribute names in lowercase, notably DIV and ID.

    :-)

    For me, the PNG workaround seems like jolly hard work and I shan’t be using it soon, alas. But thanks for the interesting idea, all the same.

    Rick :-)

    Copy & paste the code below to embed this comment.
  171. Sorry, commenting is closed on this article.