An ASP Button problem on IE6
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
These are the working buttons
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("ctl00$ContentPlaceHolder1$btnSaveInProgress", "", true, "", "", 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-STY开发者_如何学运维LE: 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("ctl00$ContentPlaceHolder1$btnSaveInProgress", "", true, "", "", 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.
I'm seeing two potential causes here.
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?
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.
Those buttons look like they are automatically styled by the Telerik's RadFormDecorator control (Web20 skin). You can try updating to a more recent version of the RadControls suite or look through the Telerik forum to see if there is a CSS workaround for this issue in IE6. One additional thing you can check is whether you have a valid XHTML doctype on the page and if you don't, then add one. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加载中,请稍侯......
精彩评论