RadCaptcha compatibility to Chrome browser

[Bhanu Prakash]

We designed our Login page and used radCaptcha along with Generate New Image (EnableRefreshImage Option) and Vision Impaired (CaptchaImage.EnableCaptchaAudio Option).  These option links are working fine in IE and FireFox but not in Chrome.  In Chrome these are rendered like static text.  I am attaching image of Login page.  Following is the code I am using in Login page. 

This is the ASPX code

<telerik:RadCaptcha ID="CaptchaCode" runat="server" ValidationGroup="SubmitGroup"
      CaptchaTextBoxLabel=" Type the code from the image"  CaptchaImage-TextChars="Numbers" BorderColor="Black"
      BorderWidth="0" ErrorMessage="" CaptchaImage-Height="40" CaptchaImage-Width="155"
      width="150"  CssClass="font_captcha" ForeColor="Black"  Display ="Dynamic" TabIndex =3 >
</telerik:RadCaptcha>

This is the Server side code.

Private Sub Pages_Login_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache)
        AddHandler Me.loginButton.Click, New System.EventHandler(AddressOf loginButton_Click)

        If Not Page.IsPostBack Then
            CaptchaCode.EnableRefreshImage = True
            CaptchaCode.CaptchaLinkButtonText = "Generate New Image"
            CaptchaCode.CaptchaImage.EnableCaptchaAudio = True
            CaptchaCode.CaptchaAudioLinkButtonText = "Vision Impaired"
            CaptchaCode.CaptchaImage.UseAudioFiles = False
            CaptchaCode.CaptchaImage.AudioFilesPath = HttpContext.Current.Server.MapPath("~/App_Data/RadCaptcha")

            Page.DataBind()
        End If
        txtUserID.Focus()
    End Sub

This is CSS Code.

.font_captcha
{
    text-align:left;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
}
.rcRefreshImage
{
    margin-left: 165px;
    margin-top :-40px;
    font-size: 10px;
    float: left;
    color: White;
    display: block;
    line-height:1.5em;
    background-image: url('../Images/Captcha_reload.png');
    background-repeat: no-repeat;
    height: 20px;
    padding-left: 30px;
    margin-top:-40px;
    width: 120px;

}
.rcCaptchaAudioLink
{
    margin-left: 165px;
    margin-top :-17px;
    font-size: 10px;
    float: left;
    color: White;
    display: block;
    line-height: 1.5em;
    background-image: url('../Images/Captcha_audio.png');
    background-repeat: no-repeat;
    height: 19px;
    padding-left: 30px;
    margin-top:-20px;
    width: 120px;
}

If this is not clear, I can attach a sample project.
Please let me know whether I am doing any thing wrong or really radCaptcha is having compatibility issues with Chrome browser. 

[Princy]

Hi Bhanu,

RadCaptcha does not have any compatibility issues with Chrome as far as I know. I tried your code without the CSS you applied and then its working fine as expected. Please check the following code which works fine at my end.

ASPX:

<telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Invalid Captcha" CaptchaImage-EnableCaptchaAudio="true"
    CaptchaImage-TextLength="5" CaptchaImage-TextColor="Red" IgnoreCase="true" EnableRefreshImage="true"
    CaptchaImage-RenderImageOnly="true" ValidationGroup="Group" ValidatedTextBoxID="RadTextBox1">
</telerik:RadCaptcha>
<br />
<telerik:RadTextBox ID="RadTextBox1" runat="server">
</telerik:RadTextBox>
<br />
<telerik:RadButton ID="RadButton1" runat="server" Text="Submit" ValidationGroup="Group"
    OnClick="RadButton1_Click">
</telerik:RadButton>

Thanks,
Princy.

[Bhanu Prakash]

Hi Princy,
Thank you for your response.  It is working fine without CSS.  But we are using CSS to format the Refresh and Audio links and that is making it not working in Google Chrome.  This is working fine in Firefox and IE but not in Chrome.  Both links are formatted like links, but act like a static Underlined Text in Chrome.  I am attaching the background images we are using for links in CSS also.  I even attached Login Page screen shot how it looks like in Chrome.  I am using internal textbox and not external textbox for Captcha.  Please try this and let me know, what wrong I am doing.

.font_captcha
{
    text-align:left;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
}
.rcRefreshImage
{
    margin-left: 165px;
    margin-top :-40px;
    font-size: 10px;
    float: left;
    color: White;
    display: block;
    line-height:1.5em;
    background-image: url('../Images/Captcha_reload.png');
    background-repeat: no-repeat;
    height: 20px;
    padding-left: 30px;
    margin-top:-40px;
    width: 120px;

}
.rcCaptchaAudioLink
{
    margin-left: 165px;
    margin-top :-17px;
    font-size: 10px;
    float: left;
    color: White;
    display: block;
    line-height: 1.5em;
    background-image: url('../Images/Captcha_audio.png');
    background-repeat: no-repeat;
    height: 19px;
    padding-left: 30px;
    margin-top:-20px;
    width: 120px;
}

[Bhanu Prakash]

Hi Princy,
It is working fine without CSS.  But we are using CSS to format the Refresh and Audio links and that is making it not working in Google Chrome.  This is working fine in Firefox and IE but not in Chrome.  Both links are formatted like links, but act like a static Underlined Text in Chrome.  I am attaching the background images we are using for links in CSS also.  I even attached Login Page screen shot how it looks like in Chrome.  I am using internal textbox and not external textbox for Captcha.  Please try this and let me know, what wrong I am doing.

.font_captcha
{
    text-align:left;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: normal;
}
.rcRefreshImage
{
    margin-left: 165px;
    margin-top :-40px;
    font-size: 10px;
    float: left;
    color: White;
    display: block;
    line-height:1.5em;
    background-image: url('../Images/Captcha_reload.png');
    background-repeat: no-repeat;
    height: 20px;
    padding-left: 30px;
    margin-top:-40px;
    width: 120px;

}
.rcCaptchaAudioLink
{
    margin-left: 165px;
    margin-top :-17px;
    font-size: 10px;
    float: left;
    color: White;
    display: block;
    line-height: 1.5em;
    background-image: url('../Images/Captcha_audio.png');
    background-repeat: no-repeat;
    height: 19px;
    padding-left: 30px;
    margin-top:-20px;
    width: 120px;
}

[Bhanu Prakash]

Hi Princy,
Any Update on this?