hasLayout.net

Opacity

Affected Versions

This bug affects: IE8, IE7

Symptoms

opacity property is not supported

Date of the Tutorial

Sat Jul 18 19:35:59 2009

Description

CSS3 opacity property is not supported in its native form in IE as it is in virtually every modern browser. To the demo!

Demo

HTML Code:
<div id="main"></div>
CSS Code:
#main {
    background: #f00;
    width: 500px;
    height: 100px;
    opacity: .2;
}

In every modern browser but IE the ' element"><div> above (with background set to bright red (#f00) will appear in a very light color [I didn't bother making up a more advanced demo that would show stuff through]. However, in IE the opacity property doesn't have any effect.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Conditional Comments Solutions)

Date of the Solution

Sat Jul 18 19:50:06 2009

Fixed Versions

all of the affected

Description

The solution to the problem is solved using IE's properietary filter property. Let's glance at the demo first:

HTML Code:
<div id="main"></div>
CSS Code:
#main {
    background: #f00;
    width: 500px;
    height: 100px;
    opacity: .2;
}
Conditional Comments:
<!--[if IE]>
    <style type="text/css"
        #main {
            filter: alpha(opacity=20);
        }
    </style>
<![endif]-->

Now, the demo is working fine... The filter "property" uses DirectX to do its black magic (note that if you're testing the demo in something that doesn't support DirectX, such as ies4linux). I won't go into the details of filter "property", but the alpha(opacity=20) sets up our opacity just the way we want it. Note that the number we used is the percentage as opposed to a fraction that we used in opacity property's value.

filter "property" is a proprietary IE-only thing and effectively won't validate; that's the only reason why I've used conditonal comments for the fix - feel free to "just stick it" in your code.

I should note that IEs filter applies only to elements with "layout". In the demo height and width give our ' element"><div> "layout" and thus it's not an issue; just keep this fact in mind.