[Solved] Strange behaviour on toggle checkbox button with images

[Steve]

I use the following RadButton on a couple of pages and it behave strangely on each page.

<style type="text/css">
    .rbBlue .rbText {
        color: blue;
    }

    .rbRed .rbText {
        color: red;
    }
</style>

       <telerik:RadButton ID="FillerNLF" runat="server" AutoPostBack="false" Text="NLF" ButtonType="ToggleButton" checked="false"
            ToggleType="CheckBox" Style="font-size: 14px; top: 30px; left: 4px; position: absolute;">
            <ToggleStates>
                <telerik:RadButtonToggleState PrimaryIconUrl="../Images/layer_transparent.jpeg" CssClass="rbBlue"  />
                <telerik:RadButtonToggleState PrimaryIconCssClass="rbOk" Selected="true" CssClass="rbRed" />
            </ToggleStates>
        </telerik:RadButton>

On page 1, I use this and the behavior is fine. When the checkbox is unchecked, the text is blue colored and it is a transparent icon shown. When the checkbox is checked, the green checkmark appears and color of the text is red. That is the proper behavior.

When I use the exact same button on another page, I am getting a square outline of the layer_transparent.jpeg file when it is unchecked. If I hover the mouse over the item, the square outline disappears and nothing is displayed, except the blue text. When the checkbox is checked, a green checkbox appears and the text is red. So, it is the unchecked behavior that is not working. It's for this page only. I noticed this as I am building the page and there is no logic in the codebehind.

[Steve]

I've attached a PNG file showing the issue I am explaining above.

There are 12 checkbox toggle buttons in the image. The first two and last one are checked and show the green checkmark.
The ones showing a grey box are supposed to have a transparent image, but instead show this grey box. On my other pages
it works correctly and doesn't show anything. Now, you will notice that "OC" doesn't have anything to the left of it. That is because
I am hovering the mouse over that checkbox (the screen shot didn't capture the mouse pointer.) That's how it's supposed to look
when the checkbox is not checked. But it shows the grey box when not checked, and when I hover the mouse over it, the grey box
disappears.

I looked at the html of the page that works and compared it to the page that doesn't . There is no difference, other than the name, text, and style tag for positioning purposes.

I really don't know what the cause of this is and need to get this resolved.

[Danail Vasilev]

Hello Steve,

I have replayed to the support ticket that you have opened, so that we can continue our discussion there.

Regards,
Danail Vasilev
Telerik