What is Digg?Sponsored by Dragon Age: Origins
Join the Dragon Age: Origins development team on Facebook view!
facebook.com/DragonAgeOrigins - EA presents BioWare's new dark fantasy epic Dragon Age: Origins. '9/10' from Game Informer.
74 Comments
- TheIconoclast31, on 10/12/2007, -3/+36I like this guy's solution better:
http://blog.bjorkoy.com/2006/12/12/flawless-and-fast-png-support-in-ie6/ - inactive, on 10/12/2007, -2/+23Nice. I was expecting a Javascript workaround.
- rarkai, on 10/12/2007, -0/+16Internet explorer doesnt recognize png alpha. This is the issue in the thread. If they just wanted matte transparency, gifs would work fine.
- MattLat, on 10/12/2007, -2/+15Until EVERYONE who currently uses IE6 downloads IE7, we'll still have to use this. I foresee being able to move over to hack-less pngs no earlier than 2010ish.
- revmitcz, on 10/12/2007, -2/+13What he failed to mention (and I don't fault him for this) is, when using an external CSS file, you can tell IE5 & IE6 to use the special png filter effects via the *html or underscore hack. Furthermore, the path to the image is from the level where the HTML document is called, not from the CSS.
Example :
div.imageholder { background: url(path.to/image.png) }
// For IE 5-6
*html div.imageholder { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’ }
// Alternatively, for IE 5-6
_div.imageholder { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’ }
Just keep in mind the image path has to be from the document loading the CSS, not the CSS file itself. So, if you keep your CSS in a folder called "css" and your images in a folder called "images", and you're pulling both from "index.html", your non-IE CSS would call the background image something like : url(../images/image.png). But, if you're using the IE PNG hack, you'd call that image like : src="images/image.png".
Hope that makes sense. - Cannon13, on 10/12/2007, -2/+13No it wont. You obviously haven't built many websites.
- pengu, on 10/12/2007, -1/+10this is a) not a "new" method. conditional comments are common knowledge to any web designer. and, they are wrong. they should be checking for less than IE7 as a higher priority than greater than ie5.
and comments about "a link to firefox" are stupid. they prove how close-minded you are. the web should be about information you can access easily, HOW YOU CHOOSE, not how the publisher (in this case, web developer) says you must access it. comments like that are very remeniscent of microsoft. - FrankieB078, on 10/12/2007, -1/+10Wow thanks TheIconoclast31 that really works out well.
- rarkai, on 10/12/2007, -1/+10This is no good if the person doesnt have flash installed. This is also useless for professionals who do not have a copy of Flash. (Hint,large companies do not usually use pirated copies of programs.)
- FrankieB078, on 10/12/2007, -2/+11@nmeadata
Your IE6 must be special because it doesn't work in mine, and I will bet it doesn't work in anyone elses either.
http://www.a-ostudios.com/images/ie6pngsucks.jpg - FrankieB078, on 10/12/2007, -0/+8I agree with rarkai it isn't a reasonable solution to force your users to have Flash just to see your images. Some people prefer to have Flash disabled.
- MattLat, on 10/12/2007, -2/+10Very nice. Now if someone could tell me why my pngs are darker in safari, and how to fix it, I'd replace all my gifs with pngs
- FrankieB078, on 10/12/2007, -1/+8It really doesn't work, but ok.
- Utopian, on 10/12/2007, -0/+7@MattLat
That's probably something to do with gamma "correction": http://hsivonen.iki.fi/png-gamma/
Try removing the gAMA value from the PNG file's header. I use: http://entropymine.com/jason/tweakpng/
PNGCrush will also do it. - FrankieB078, on 10/12/2007, -0/+7Only 75% of people using the internet...yes you have to have a verified copy to get IE7 from Microsoft but there are standalone installers you might be able to find on Google.
- rarkai, on 10/12/2007, -4/+9The number of people using less than ie5.5 is completely insignificant.
- noahhoward, on 10/12/2007, -0/+4@nmedata: You're thinking of .gif images... .png images do not have matte transparency, they run off of alpha transparency which is the part of .png's that IE's developers never seemed to get.
- FrankieB078, on 10/12/2007, -4/+8IE7 is currently being used by like, 6% of internet users. You gonna make everyone that visits your website download IE7 just to view your transparent PNG's? I'm not sure what world you live in, but I would love to live there because that seems like a great solution lol.
- revmitcz, on 10/12/2007, -1/+5ignore the 2nd part of my comment - the underscore only works on attributes, not class names. Heh. Been awhile since I used that hack. Anyway - the *html hack WILL work :)
- D3koy, on 10/12/2007, -1/+5@FrankieB078
Whats that skin you have on XP, I like it... - lumbergh, on 10/12/2007, -1/+41) This is old news, at least 2 years old
2) The css conditional logic is wrong (as stated by others). It should not apply to IE 7.
3) You have to apply this style manually to each png (by ID name, specifying the image path) unless you use a javascript solution (which I prefer).
4) CSS conditional logic is crap design - noahhoward, on 10/12/2007, -1/+4Hope you don't do webpages for money. You go to an IT firm, give them a link to your personal site and see what happens when you stonewall them.
- scottschiller, on 10/12/2007, -0/+2It's also worth mentioning that IE 6 has other issues with PNG background images - sometimes if they're placed on a link, that link will stop working, ie., you just can't click it; the workaround is that the element with the background should be relatively-positioned (or perhaps have CSS like zoom:1; applied), and the parent should not have any positioning, according to one article I read.
How to fix "broken links" from PNG backgrounds:
http://www.hrunting.org/csstests/iealpha.html
Another issue is that IE 6 will not tile background PNG images, as far as I'm aware. This is very bad. I have also found problems when trying to position background PNGs, since it's a filter: CSS syntax you're using, you can't specify tile or background-position:x y.
One approach I've taken (though invalid), is
#myDiv {
background:transparent url(/path/to/some.png) no-repeat 0px 0px;
_background-image:none; /* ie - D3koy, on 10/12/2007, -4/+6people using anything that low should be kicked off the internet anyway...not like it costs any money to upgrade to something better...
- Daniel0, on 10/12/2007, -0/+2@TheIconoclast31: That solution requires the user to have JavaScript turned on. The article linked to won't.
- enkafan, on 10/12/2007, -2/+4Strangely I was going to post on here that this is a long solved problem. If you download IE7 - the Javascript library created to make IE6 behave properly items like PNG transparency and certain unsupported CSS features. You can download it here: http://dean.edwards.name/IE7/
Basically it just applies this CSS dynamically to all the images on the page: http://dean.edwards.name/IE7/ - Bramus, on 10/12/2007, -0/+2Omg that's old ... the .htc method still is the most portable solution ever. No star hack whatsoever needed, only a simple conditional to trigger "IE lte 6" and you're done.
- noahhoward, on 10/12/2007, -0/+2While I'm tempted to just go on about how this is old, has been covered in several other tech sites and is probably blogspam.... it seems there are plenty of people who didn't know about it (people seriously if you want to do web design start researching or you will always be ten miles behind) so we may as well let it be.
For those of you who are going on about just putting a link to FireFox, while I share the sentiment, please don't touch any webcode ever again. Not the attitude we need from developers... and if you were joking, the joke is older than this article. - Cl1mh4224rd, on 10/12/2007, -1/+3"Just keep in mind the image path has to be from the document loading the CSS, not the CSS file itself."
Actually, no, that's wrong.
"For CSS style sheets, the base URI is that of the style sheet, not that of the source document."
http://www.w3.org/TR/CSS21/syndata.html#value-def-uri - somerandomnerd, on 10/12/2007, -0/+278% of statistics are made up.
- AppSol, on 10/12/2007, -0/+2Gaaaah Stop Please.
It's browser wars 2, the adventure continues. We're supposed to be getting past browser sniffing conditional comments and the like, we're supposed to be moving to the semantic web.
I like this hack but I won't use it because:
1. Your code wont validate
2. It wont work under https
3. There are alternatives that do not detract from the functionality of the page
4. It's just not worth filling your code with s**t for the sake of a peice of shiny bling.
Oh and BTW, this is not news, this has been on alistapart for yonks. - RustIndy, on 10/12/2007, -1/+3The issue would be that something like 70% of the Windows XP installations out there won't validate - some because M$ screwed up the detection, mostly because most people don't want to pay for something as broken as Windows. And IE7 won't install without validation (or cracks).
Eventually, you could say that 99% of the people with "valid" installations of XP will have IE7, but that'll still only account for about 30% of your IE traffic. The rest will be using 5.5 and 6.
Sucks, eh? - bradleyland, on 10/12/2007, -2/+4Hey frick and frack, RTFA. The fix involves wrapping your PNG in a DIV and applying the appropriate CSS. Nmeadata's link is directly to a PNG and Frankie's is to a screenshot of his browser displaying said image. That's the whole point! IE6 doesn't support transparent PNGs without this extra effort. Again, RTFA!
- noahhoward, on 10/12/2007, -1/+2Use .htc for images, then use this fix for the bg images.
- RustIndy, on 10/12/2007, -0/+1Unfortunately, my solution has been a combination of a Javascript (with DEFER, very important) to handle inline PNGs, and a conditional comment to load a 2nd stylesheet for IE5.5 and 6 that either replaces any PNGs in the CSS with GIFs (for repeating images, like backgrounds or edges) or uses the DirectX filter to force the transparency (same as the JS does, but within the CSS).
It's a PITA, but it works (as long as the user has Javascript turned on, at least). - wfbnadador, on 10/12/2007, -0/+1i thought digg was for new-s this is super old. us web designers have been using it for ages. as a previous commenter said its about 2 yrs old
- isilex, on 10/12/2007, -2/+3I have been using the .htc method. The best method I have seen so far and works all the time.
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html - FrankieB078, on 10/12/2007, -1/+2@ D3koy
Here you go brother.
http://www.deviantart.com/deviation/29071762/ - echo2501, on 10/12/2007, -0/+1Browser sniffing and semantic web are two separate issues, just as design and content are (or should be) separate. If you haven't yet, pick up a copy of "Transcending CSS" by Andy Clarke. There's a great section in there about how sometimes you just have to let older browsers not have advanced features (ie. rounded corners, multiple backgrounds). Still, we shouldn't let them break. Design for the future, but don't forget about the past.
The hack portion of this solution (the part where the CSS only reads in IE or not in IE) I won't buy into for reasons I stated above. More often than not, hacks lead to more work down the line. A couple of my sites broke in IE7 beta because of IE hacks. Do filters count as hacks, though? I'll still use png filters or opacity filters and just check for browser type. - inactive, on 10/12/2007, -0/+1When testing IE make sure you disable the quicktime plugin or else quicktime by default will try to handle PNG images in internet explorer. Quicktime cannot handle PNGs properly.
- hablo4u, on 10/12/2007, -2/+3I love this method for images that are directly inserted in the html. Is there a way to have the .htc apply to background images in the css? The htc doesn't fix those and I've looked for a solution to no avail.
- noahhoward, on 10/12/2007, -0/+1Because tranparency doesn't just apply to completely clear sections in .pNGs. Perhaps the battle should be over translucency support.
- shockertwin, on 10/12/2007, -0/+1IE7 is a critical update now on windows update, so whats the issue?
- inactive, on 10/12/2007, -0/+1I used this method about 2 years ago, with the * hack - there is now a much better solution by running the pngs through pngquant: http://www.libpng.org/pub/png/apps/pngquant.html
The files that come out are paletized 8bit rgba which is fine for most images (& a lot smaller than the 32bit that comes out of photoshop), they also downgrade nicley in IE without any css or script hacks. - brianb722, on 10/12/2007, -0/+1@scottschiller...
If you want a repeating PNG in IE you can use sizingMethod='scale' instead of crop. Since it's scaling the image and not actually repeating it it only works in certain situations, but it does get the job done in many situations. - iWasHere, on 10/12/2007, -1/+2IE 6+ and FF 1+ is all I serve these days. I'm sorry if you are in the minority, but its not worth the time anymore. :/
- CrimsonMage, on 10/12/2007, -0/+1BAHHH! I posted about this 8 months ago - and even gave the fix on how to use PNGs as backgrounds and have the links work.
Oh well - guess it shows how a digg Friends network gets the most diggs
Here is the fix: http://www.clikproductions.com/blog/2006/02/using-png-transparencies.html - WebDragon, on 10/12/2007, -0/+1http://homepage.ntlworld.com/bobosola/pnghowto.htm has what seems to me to be a far more effective solution, and I've used it considerably. The only place it doesn't work for me (yet) is IEs4Linux :)
- codemonkey2841, on 10/12/2007, -0/+1Very nice, CSS has allowed some decent stuff to happen on webpages.
- h0f5, on 10/12/2007, -0/+1This is so totally old. Simple google would do if anyone was really searching for it.
-
Show 51 - 74 of 74 discussions
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2009
— Content created and posted by Digg users is 