Artifacts on disabled image

[Cliff Akers]

Hi All,

I am using RadControls for ASP.NET Q3 2010. I am converting a web application to use the radtoolbar with the Office2007 theme. The current web application has several buttons in a table row. I have changed those buttons to RadToolBarButtons and wrapped in the RadToolBar. Everything is working except the display of the disabled buttons. When the buttons are disabled, the button image has artifacts around it; the button does not look like the original image. I really just want to use the same image and override the opacity. Even if I override the opactiy and set it to 100, the image does not look like the original; I would expect that if the opacity had been set to 100 the image would be identical to the enabled version. I am using IE 8. I have attached an image to further describe this issue.

Thanks,
Cliff

[Cliff Akers]

Hello again,

I determined that at least part of the problem was specifying a DisabledImageUrl. This was causing issues in IE; the image would look as though it was on a grey scale. None of the colors were being displayed properly. The disabled image that I was using was just a copy of the original image with the opacity lowered. Since the opacity seems to be automatically lowered by the radtoolbarbutton once it is disabled and the disabledimage is the same as the original; I don't need the disabledimageurl property.

Since I removed the disabledimageurl property, the images for the radtoolbarbuttons look better (I can see the colors) but there are still artifacts around the images in IE. The page looks fine in Firefox. Please see attachment.

Is there a way to get the same clean look in IE that we observe in Firefox for disabled radtoolbarbutton images?

Regards,
Cliff

[Cliff Akers]

In case anyone else has this issue here is what I did to solve the problem.

I thought that I didn't need the DisabledImageUrl but it turns out that I do after all. The problem was arising when the following style was applied to the disabled button.

{
    filter: alpha(opacity=40)
}

For some reason in IE 8 the edges of the disabled image are not displayed correctly when this style is applied. To override this style place the following in the page with the control in question.

.RadToolBar .rtbDisabled

.rtbIcon

 

{

 

filter: none;

}

 

This eliminates the opacity that is being applied to the image and the display issues. This of course will make the image look exactly the same disabled as it is enabled. This is not good so take the original image and alter with an image editor to get the desired transparency. Add that image to your project and then specify the url for the newly added image in the DisabledImageUrl.

This fixed my display issues. Hope this was helpful to someone else out there in the same boat.  

Cheers,

Cliff