donderdag 17 maart 2011

transparency cross browser support opacity or png

Ok, i still have to clean up this article since i'm writing it while finding out how it works.

My problem is getting the opacity on a div working for any platform.
Since MSIE isn't al that great in opacity, it's kinda tricky.

I found out opacity is kinda easy to use via css. it works in almost all browsers.

http://www.drunkenfist.com/304/2007/07/09/cross-browser-opacity-using-css-and-internet-explorer-custom-filters/

but without setting the width or height, it could conflict in some browsers (a div of 100% width inside a div of 200px width wont display properly)

http://www.west-wind.com/Weblog/posts/10213.aspx

I used tables around the div, and inside the div to solve this problem.

Now everything works in most browsers (opacity+stretchable divs (they stretch to the content dimensions, the width of an image inside the div, which will get the transparent overlay (div) containing text which isnt transparent (in a seperate div)

Normally setting opacity on a div, will make everything inside it transparent.
to avoid this, u can use background-color:rgba(180,80,80,0.8) which only aplies alpha on the div background, not the content.
Pretty need feature, but of course not supported by MSIE, also not MSIE8. terrible. It works in most current popular browsers, cross platform.
link

The only way i currently see now to solve this, is using transparent png for these browsers.

http://24ways.org/2007/supersleight-transparent-png-in-ie6

I will see how that works.
Or i use png by default. or i use png just for IE.
anyway, png would be best as only fix, but then again, not all (older) browsers support (transparent) png...
http://entropymine.com/jason/testbed/pngtrans/
argh.

check (2010 data):
http://serverfault.com/questions/34464/how-wide-spread-is-browser-support-of-png-graphics
http://www.libpng.org/pub/png/pngapbr.html

this: http://css-tricks.com/rgba-browser-support/

or you can always use a hammer...Please leave your comments..