had an #epic #WTF moment just now trying to get Opacity to work in IE 7. and i had lost all hope until i stumbled upon the actual solution.
If you were lost trying to do the same thing then here is what you have to do.
by this time you would have realized that
.className {
opacity:0.2
}
alone would not have helped. If you havent shame on you, dont ever think about web designing again. a smart bit of googling would have pointed out to what needs to be done
.className {
filter: alpha(opacity=20);
opacity: 0.2;
}
some more bit of googling would have also told you about the new '-ms-blah-blah-blah' CSS style that has to be used in order to get it working with IE 8.
so your end result would look some what like this
.className {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=20);
opacity:0.2;
}
By this time if you find that opacity works, then good for you matey! you solved the inherent problem without knowing what really happened. take a break go have coffee.
If on the other hand you were like me still having no luck then here is what really happened, what is missing and what needs to be done to fix it.
It so happens that Opacity like many other styles require a DOM element to have a layout. now dom element acquires layout / position, if it is given some property for it. an absolute position, a width, a height (except for setting it to auto), a top, a left, etc will give the DOM element a layout position and TADA transparency will work. if on the other hand, if your element does not have a layout then IE will simply ignore the transparence property and move on. Weird right??? I SO AGREE.
so here is a quick ugly fix that will work
.className {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=20);
opacity:0.2;
zoom:1;
}
zoom will (surprise, surprise!!) give the element a layout. and IE is happy that all its DOM elements have its place and then it will go and shadow away the elements you want it to.
So next time remember to put the zoom:1; on your CSS style.
These are exactly the times when you wish IE just FADES AWAY.
further reading for people who really care about details:
here