Log in

View Full Version : IE6- Png Background Transparency + floating errors



poliking
10-28-2007, 01:05 AM
hey everybody:
So I have two (small) problems with my site in IE6.

This is how it should look:
http://www.lucidcitypictures.com/good.png

This is what IE6 is doing to it:
http://www.lucidcitypictures.com/bad.png


This is index page at www.lucidcitypictures.com. I know that with the .png's I need to put the proper code to set transparency in backgrounds. I found this site that shows how to do it:
http://www.twinhelix.com/css/iepngfix/

The problem is that when I put the code in my .css file it turned nearly all of my .pngs invisible. I know I did something wrong. Any ideas? This is what it looked like:
http://www.lucidcitypictures.com/trans.png

Finally, the ColOne content on the page is being pushed down below ColTwo in explorer.

Arg sorry for the newb questions. Don't go too hard on me I'm still learning! Any help would be greatly appreciated! Thanks kindly and Happy Halloween (and Leopard).

JP

jscheuer1
10-28-2007, 05:45 AM
There are other pngfix schemes out there, at least one other. Anyways, these schemes try to anticipate all possible eventualities, but they simply cannot. Add in the odd coding error/inefficiency, and you have a nightmare waiting to happen. IE 6 and earlier (to IE 5.5) have an alpha image loader filter that can be used to display alpha transparency pngs as backgrounds. The way it is used however, isn't exactly like a regular background image.

My advice would be to learn how to use IE version specific conditional comments and the filter itself. See if you can work out a way that suits your existing design.

While you are doing that, determine if you really need alpha transparency or not. If you know the background color that you want to have show through, a simple 100% opaque gradient image will often do just as well. If your image only needs to have regions of full opacity and regions of full transparency, single layer transparent .png or .gif can be used. If you can eliminate all of the alpha transparency images in this manner, you no longer need to worry about the tricky behavior of the IE filter. If all you need is a drop shadow effect, there is a filter just for that, no image needed (in IE 6 and 5.5). The shadow filter can be made IE 6 and 5.5 specific, while giving all other browsers your alpha png shadow bg and removing it for IE 6 and 5.5.