alpha transparency png support for IE...

Mike Lane

I was browsing the smugmug default css and noticed that the filter: hack for alpha transparencies in IE was included in the css. Previously I had thought that this was part of an included script. So I have some questions.

First (this is a question that's been stewing for me not a part of the new hotness) whenever I have a png on my site (this one and my blog where I have the script to fix it ... i think, it's been too long) the image loads with a light blue background at first and then becomes transparent. That doesn't appear to be an issue for the smugmug pngs. How'd you do that or what am I doing wrong? I've researched it and can't come up with the answers really.

Second, I noticed that you have several classes with an attribute selector like this one:

.cart_add[class] {
background: url(/img/header/cart_add_black.png) no-repeat;
}

immediately following the previous class declaration with the filter: ie png hack (.cart_add {} in this case). Would this not do the same thing as .cart_add {background: url(...)} since the .cart_add is always going to be in an element with a class definition? Couldn't the .cart_add[class] {} styles be added into the .cart_add class? Is this a hack to hide the background: url(...) from IE?

Just trying to learn is all.

{JT}

We still do have an include for IE that will make your PNG files transparent. And it is that include file that causes the images to load blue then flash transparent, since the script does not execute until the entire page loads.

For our new PNG files, we try to do inline transparency and it eliminates the flash. This makes the previous include file fix redundant, and we may be getting rid of it soon.

And to answer your second question, yes it is a hack to hide that definition from IE, since IE does not support psuedo selectors yet.

Mike Lane wrote:

I was browsing the smugmug default css and noticed that the filter: hack for alpha transparencies in IE was included in the css. Previously I had thought that this was part of an included script. So I have some questions.

First (this is a question that's been stewing for me not a part of the new hotness) whenever I have a png on my site (this one and my blog where I have the script to fix it ... i think, it's been too long) the image loads with a light blue background at first and then becomes transparent. That doesn't appear to be an issue for the smugmug pngs. How'd you do that or what am I doing wrong? I've researched it and can't come up with the answers really.

Second, I noticed that you have several classes with an attribute selector like this one:

.cart_add[class] {
background: url(/img/header/cart_add_black.png) no-repeat;
}

immediately following the previous class declaration with the filter: ie png hack (.cart_add {} in this case). Would this not do the same thing as .cart_add {background: url(...)} since the .cart_add is always going to be in an element with a class definition? Couldn't the .cart_add[class] {} styles be added into the .cart_add class? Is this a hack to hide the background: url(...) from IE?

Just trying to learn is all.

Mike Lane

{JT} wrote:

We still do have an include for IE that will make your PNG files transparent. And it is that include file that causes the images to load blue then flash transparent, since the script does not execute until the entire page loads.

For our new PNG files, we try to do inline transparency and it eliminates the flash. This makes the previous include file fix redundant, and we may be getting rid of it soon.

And to answer your second question, yes it is a hack to hide that definition from IE, since IE does not support psuedo selectors yet.

Thanks for the quick response. I'm going to start emulating the smugmug css filter hack:D