Problem with the display of a checkboxlist in Safari & Chrome.

[Gallaz Philippe]

Hello,

My project use a form decorator in a user control to skin a checkboxlist. Here is the code of the .ascx page :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BOSSearch.ascx.cs" Inherits="UmbracoBOSControls.Controls.BOSSearch" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Src="BOSButton.ascx" TagName="BOSButton" TagPrefix="uc1" %>


     <telerik:RadFormDecorator runat="server" ID="rfdTopSearch" EnableEmbeddedSkins="false" Skin="TopSearch" />


        <div id="TopSearchDetail">
                <asp:CheckBoxList runat="server" ID="cbxListModules" RepeatColumns="1" RepeatDirection="Vertical"></asp:CheckBoxList>
                    </div>

Here is my css file used with the formdecorator :

/* Decorate <input type="checkbox" /> */
.RadForm_TopSearch .rfdCheckboxUnchecked,
.RadForm_TopSearch .rfdInputDisabled.rfdCheckboxUnchecked:hover
{
    background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 0;
}

.RadForm_TopSearch .rfdCheckboxUnchecked:hover
{
    background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -200px;
}

.RadForm_TopSearch .rfdCheckboxChecked,
.RadForm_TopSearch .rfdInputDisabled.rfdCheckboxChecked:hover
{
    background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -420px;
}

.RadForm_TopSearch .rfdCheckboxChecked:hover
{
    background: transparent url('FormDecorator/CheckBoxSprites.png') no-repeat 0 -640px;
}

.RadForm_TopSearch label
{
    color:#FFFFFF;
    font-family:Arial;
    font-size:11px;
    text-indent:6px;
}

The display of my checkbox list is OK in IE8 and Firefox 3.6. In Safari and Chrome I just see the label of my list of checkbox. Every images are not displayed... Could you help me to find what's wrong in my code ?

[Georgi Tunev]

Hi Gallaz,

The styling of radiobuttons and checkboxes in Webkit browsers is done entirely by CSS - check the original skin file that you have used. The selectors that you need are available near its end - search for "webkit" to locate them (usually near line 300).


Greetings,
Georgi Tunev
the Telerik team