Expressing IT

Oh Well! In the earlier post a few days back regarding Opacity in IE8 ,I forgot to mention an important point that “IE 8 strict mode doesn’t allow for CSS opacity“.
For those who donot understand what I mean by strict mode , here is quick tutorial.

A work around to this (Before IE dev team realise that they have paved way for re-work routines all over the world, for web-sites using Pop-up lightboxes with some opacity, and put back support for OPACITY) is to use a semi transparent image …preferably in PNG format (I have had bad experience getting transparent GIF images to work as they were supposed to). Create a PNG image of the color and percentage of transparency you like , in you favourite image editor and use it as a background image for your lightbox overlay.

i.e.
Instead of something like this

.lighbox_overlay{
background-color: #ffffff;
z-index:1001;
-moz-opacity: 0.6;
opacity:.60;
filter: alpha(opacity=60);
}

Do this….

.lighbox_overlay{
background:url(bkg.png) repeat;
}

TO TRY IT, CLICK HERE! | TO DOWNLOAD, CLICK HERE!

If you are viewing this page in IE8 , then  you must be seeing a full opaque white background behind this post. Yesterday , my collegue pointed this out to me (As I am one of those people  who adapt to changes slowly and steadily… especially browsers. Might say, Im a coward, but so be it …. Being a UI developer, I’m always shit scared of new browser versions … you know what Im tlaking about, right?)

Digged around for while, trying to find a solution to fix it and then what …
This time our ALL TIME FAVOURITE browser  has done it all over again by dropping all support for CSS opacity. The non-standard `filter: alpha(opacity=##)` CSS attribute has been removed , Nice ,  but they also totally forgot to add CSS3 opacity support (like how all the other browser’s nicely have kept it in).  So, for the first time since GOD told us about CSS opacity ( since IE 5.0 , I guess)   , a web browser won’t support CSS opacity.
And now for the cream on top: Official word from IE 8 team? It’s “by design” and “we will consider this in a future version of IE”.

PS: Try this page in FF, swear it looks neat!

When I read  this article on A List Apart “ Faux Absolute Positioning
by Eric Sol “, I was nothing less than IMPRESSED.  I was also depressed majorly , cause,  honestly I was wondering , why cant I come up with something fabulous as this.

Usually, when we create CSS layouts, we use “POSITION” or “FLOATS”  , or a very bad combination of both. Eric Sol and his team define a next to perfect technique of a new type of CSS layout technique , which they have christened as  “Faux Absolute Positioning” after the faux columns technique that simulates the presence of a column. 

You know that problem all of us CSS developers have with disintegrating layouts (The unexpected content changes that cause entire columns to wrap ,  when we use floated layouts ) … Well! Seems History!!!!
This layout technique  is still very young, and has to trashed out by all those CSS gurus out there, before it becomes an un written standard.   I’m happy to use it NOW! … and am already into  middle of converting my earlier problematic/floating un-necessarily layouts  into FAP layout already… and am glad to say the “we are already using Faux Absolute Positioning for this blog site as well ” … GO try it , NOW!

Kudos Eric!!