Re: [css-d] Started over - new questions - why not to use PNG's?
Hi! Niklas Kanthak wrote: Don't use PNG for images, only GIFs or JPGs. I'm just curious, why not to use PNG's. You mean PNG's in general, or only transparent PNG's? Because I like this format much more than GIF's or JPG's for it's better quality. I know that IE doesn't support transparent PNG's but support of normal PNG's is okay, or have I missed something? Thanks, Erik __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Started over - new questions - why not to use PNG's?
Erik Gyepes wrote: Hi! Niklas Kanthak wrote: Don't use PNG for images, only GIFs or JPGs. I'm just curious, why not to use PNG's. You mean PNG's in general, or only transparent PNG's? Because I like this format much more than GIF's or JPG's for it's better quality. I know that IE doesn't support transparent PNG's but support of normal PNG's is okay, or have I missed something? One thing to be aware of is PNG color-shifting in IE. If you try to use a non-transparent PNG with non-square edges and fill in the background color, then place it inside a region with a CSS background-color, they may not match up exactly, even with supposedly the same hex values. Even when opening the PNG in Photoshop, it will show the PNG as having the correct hex value. In these circumstances, it's best just to use a 10x10 pixel flat color PNG as your background-image for the container region. Don't use smaller tiles than 10x10 (i generally go for at least 20x20 myself) as this puts a lot of strain on the client and you may get strange rendering glitches, especially on older machines. Of course, similar problems arise with JPEGs, especially when saved at low-quality, but at least with JPEGs you can validate the hex value shift in Photoshop. david __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Started over - new questions - why not to use PNG's?
One thing to be aware of is PNG color-shifting in IE. If you try to use a non-transparent PNG with non-square edges and fill in the background color, then place it inside a region with a CSS background-color, they may not match up exactly, even with supposedly the same hex values. Even when opening the PNG in Photoshop, it will show the PNG as having the correct hex value. In these circumstances, it's best just to use a 10x10 pixel flat color PNG as your background-image for the container region. Don't use smaller tiles than 10x10 (i generally go for at least 20x20 myself) as this puts a lot of strain on the client and you may get strange rendering glitches, especially on older machines. Of course, similar problems arise with JPEGs, especially when saved at low-quality, but at least with JPEGs you can validate the hex value shift in Photoshop. david That is an interesting tip I didn't know about. I've always preffered PNGs for their quality and for being free (as in freedom ;-))... I've found something in a page ( http://www.cristalab.com/tips/21618/png-con-transparencia-alpha-en-internet-explorer) suposed to correct transparency problems, which I don't quite understand. What do you think?: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader» (src='imagen.png',sizingMethod='scale'); img src=imagen.png style=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='imagen.png',sizingMethod='scale'); alt= / There's also a way of coming around png problems in IE using javascript. http://www.aoyama.com.mx/foros/viewtopic.php?t=24 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Started over - new questions - why not to use PNG's?
kuasar wrote:
I've found something in a page (
http://www.cristalab.com/tips/21618/png-con-transparencia-alpha-en-internet-explorer)
suposed to correct transparency problems, which I don't quite understand.
What do you think?:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='imagen.png',sizingMethod='scale');
img src=imagen.png
style=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='imagen.png',sizingMethod='scale'); alt= /
I use a slightly more complex method to accomplish this, I attach a
behavior file in an IE-only stylesheet (using conditional comments) to
everything with a class png:
.PNG {
behavior: url(/path/to/pngbehavior.htc);
}
The behavior file is a modified version of something I found on the web
somewhere a long time ago:
public:component
public:attach event=onreadystatechange onevent=setAlpha() /
script language=javascript type=text/javascript
document.transparentImage = ../img/trans.gif;
function setAlpha()
{
// images
if (this.src this.src.indexOf(document.transparentImage) == -1
this.src.toLowerCase().indexOf(.png) != -1) {
this.runtimeStyle.filter +=
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + this.src +
',sizingMethod='scale');
var width = this.width;
var height = this.height;
this.src = document.transparentImage;
this.width = width;
this.height = height;
}
// background images
var bgImg = this.currentStyle.backgroundImage;
bgImg = bgImg.slice(bgImg.indexOf('')+1,bgImg.lastIndexOf(''));
if (bgImg.indexOf(document.transparentImage) == -1
bgImg.toLowerCase().indexOf(.png) != -1) {
this.runtimeStyle.backgroundImage = none;
this.runtimeStyle.filter +=
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + bgImg +
',sizingMethod='crop');
}
}
/script
/public:component
I've never really gotten around to optimizing and/or checking out edge
cases for this file, so YMMV. It should really only be running the
script when readystate=4, that's pretty obvious now that I look at it...
The thing to be aware of here is that you can't use this for tiling
background images, or when you need to adjust the background-position
property. As far as I know, there's no way to accomplish that in IE.
Also, IE's proprietary filters are resource hogs, so I tend not to use
these for icons that appear too many times on a page (for example in
long lists or grids).
david
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
