Greying out a button from code-behind does not work in IE

Question

Hi,

I have two drop down lists on a page. The behavior is as follows:

1. select something in list 1
2. list 2 is enabled
3. select something in list 2
4. button is enabled

I am doing the above with autopostback enabled on the drop down lists. To toggle the button I use the code below:

if (ddlAvailablePrograms.SelectedValue != string.Empty)
{
     careerInfoLearnMoreSubmit.Enabled = true;
     careerInfoLearnMoreSubmit.Style.Remove("opacity");
     careerInfoLearnMoreSubmit.Style.Add("opacity", "1.0;");
}
else
{
     careerInfoLearnMoreSubmit.Enabled = false;
     careerInfoLearnMoreSubmit.Style.Remove("opacity");
     careerInfoLearnMoreSubmit.Style.Add("opacity", "0.5;");
}

This works fine in Firefox but in IE as soon as I make a selection in the first drop down list the button looses its greyed out style.

Any suggestions how to fix this in IE?

Thanks,
b3n

Answer 1

The opacity CSS style has known issues with Internet Explorer.

Try adding this to your CSS stylesheet, and instead of adding an inline style, add a class:

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50);                  
}

Order has to be exactly like above.

This technique is shown/used here: http://www.quirksmode.org/css/opacity.html

Also, i have heard using jQuery to apply the opacity is ideal, because jQuery handles all cross-browser issues. Is that an option?