Q3.1010 : RadButton, Embedded Icons, and PNG Transparency

[Sébastien]

Hi Telerik Team !

Most of our users are using IE6, but we would like to use the Embedded Icons as available in RadButton. The Icons doesn't display well. Is there is any know remedy ?

Cheers,

S.F.

[Sébastien]

You didn't test any solution to remedy this problem ?
There is still the possibility to apply any PNG-Fix locally but did you tested it with RadButton ?

[Bozhidar]

Hi Sébastien,

No, we do not dropping IE6 support and testing, but as you know this browser is quite old, and we can not stop the further developing of the controls just because IE6 is still in usage. More and more people are using IE7, IE8, which are also not so nice to the web standards, but are much better than IE6. Also we have really modern browsers like Firefox, Opera, Safari and Chrome, and also the future release of IE9.  It is really hard to develop the controls in a modern way and in the same time to support in 100% IE6, which is really poor in the CSS support. We do our best to keep the cross-browser support in a good level for all major browsers, but we also want to make the controls better. And if we develop them thinking in first place for IE6, it will not gonna work.

As for the RadButton embedded icons, we prefer not to use the png fix as CSS filters cause a lot of conflicts, we are trying to limit the filter usage. We have created the set of embedded icons as 24 bit png sprite which looks great in all major browsers except IE6.

We did not put a fix for IE6 in order to keep the control size small. If you need to use it in IE6 you could export the embedded sprite icons as 8 bit png or gif file and to overwrite the CSS.

For your convenience, I am attaching the 16x16 sprites exported to 8bit png and bellow is the necessary CSS to be used for IE6:

<style type="text/css">
        *html .rbAdd,
        *html .rbRemove,
        *html .rbOk,
        *html .rbCancel,
        *html .rbPrevious,
        *html .rbNext,
        *html .rbSave,
        *html .rbConfig,
        *html .rbRefresh,
        *html .rbEdit
        {
            background-image: url("rbBasicIcons16x16IE6.png") !important;
        }

        *html .rbUpload,
        *html .rbDownload,
        *html .rbOpen,
        *html .rbAttach,
        *html .rbPrint,
        *html .rbSearch,
        *html .rbHelp,
        *html .rbCart,
        *html .rbRSS,
        *html .rbMail,
        *html .rbFB,
        *html .rbTwitter
        {
            background-image: url("rbExtendedIcons16x16IE6.png") !important;
        }
    </style>

Greetings,
Bojo
the Telerik team

[Sébastien]

Thank you very much for this solution.
I share your point of view about IE6, and I am happy with this solution : the icons are less bad than before and it's enough for me because at least it doesn't look a bug.

I attach a screenshot of the solution.