R – An ASP Button problem on IE6

asp.netbuttoninternet-explorer-6telerik

I have an ASP.NET web application, which operates just fine on IE7, IE8, IE8(Compatibility mode) and on Firefox, however, we have now some users on IE6 (and no they aren't going to change any time soon)… When displaying the buttons on IE6, they don't render correctly, and the onclick events don't fire.

There isn't any detection taking place to determine the browser at present. Should I need to change what the page is doing to support IE6 ?

These are the non working buttons
alt text

These are the working buttons

alt text

Example of one of the Buttons definitions:

        <asp:Button ID="Button1" SkinID="formbutton" runat="server" Text="Cancel" OnClick="Button2_Click" CausesValidation="False" 
        ToolTip="Cancels any changes"/>

Any thoughts would be gratefully received.

Cheers

Edit 1:
Before Rendering, the code is :

<input type="button" name="ctl00$ContentPlaceHolder1$btnSaveInProgress" 
    value="Save as In Progress" onclick="clickOnce(this, 'Cargando...');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnSaveInProgress&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" 
    id="ctl00_ContentPlaceHolder1_btnSaveInProgress" 
    title="Saves this commission as 'In Progress'" 
    style="color:White;background-color:#547ED8;border-style:Double;padding:3px;" />

After rendering, it is this:

<INPUT class=rfdDecorated id=ctl00_ContentPlaceHolder1_btnSaveInProgress 
    title="Saves this commission as 'In Progress'" 
    style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; COLOR: white; BORDER-TOP-STYLE: double; 
        PADDING-TOP: 3px; BORDER-RIGHT-STYLE: double; BORDER-LEFT-STYLE: double; BACKGROUND-COLOR: #547ed8; 
        BORDER-BOTTOM-STYLE: double" 
    onclick="clickOnce(this, 'Cargando...');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnSaveInProgress&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" 
    type=button value="Save as In Progress" name=ctl00$ContentPlaceHolder1$btnSaveInProgress>

Probably worth mentioning that it is also using the Telerik AjaxManager on the page, though I don't know if this is relevant.

Best Answer

I'm seeing two potential causes here.

  1. The SkinID could have formatting issues that aren't immediately seen, even in the final rendered output. Have you tried doing the button formatting using the CssStyle property instead?

  2. According to this article, there are some issues with how IE6 handles padding and margins in CSS. The answer is to have a second line in the CSS class that IE6 will pick up. So your class file would look like this:

    .FormButton
    {
       color:White;
       background-color:#547ED8;
       border-style:Double;
       padding: 3px;
       _padding: 3px 0px 3px 0; /* IE6 Workaround */
    }

Hopefully one of these items would do the trick. In general I'd suggest using the CSS route for your buttons anyway, since CSS is well established, unless you already have some requirements in place to use skins.

Related Topic