Hover/Out states for buttons using RadFormDecorator

[Sulay Shah]

Can someone please tell me how I can keep the RadFormDecorator in my web page so that buttons appear with the Office2007 skin, but I want to remove the Hover/Out states.  Currently the text and size of the button changes when I hover over a button, I do not want the button to change size or look like the text is changing size, I just want the button to be decorated like office2007 without it changing size on Hover/Out.

[Martin]

Hi Sulay Shah,

The behavior you have descibed is rather strange, and you are the first one to report it. I checked with our online examples, and all skins seem to work fine. This makes me believe that there may be a problem with inherited custom styles on your page - for example global selectors for a:hover, a:active or a:focus, missing doctype or something else. Try the following - remove any linked CSS files and check if the problem persists. Also, if you are using that skin as an external and modified resource, set the same skin as embedded and see if the problem persists. If the problem is caused by inherited global styles, make sure you replace the global selectors with CSS class names, as it is a must on pages with third party controls.

If you still need the :hover and clicked states removed - set the skin as an external resource, and simply remove any :hover and .rfdClickedButton rules.

Regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jones]

Hello,

I am the second one to report the problem as well. My company replaced the IE6 by IE7. Since that, buttons change their seizes
when hovering. I read your post and checked all my settings. Unfortunately the problem persists. Even in a new AJAX application with just the button and the RadFormdecorator with Outlook2007-style I get this problem. Do you have any other ideas?

Thanks in advance,

regards, Jonas

[Martin]

Hi Jones,

Once again - we tested this behavior on our side, and everything seems to work fine. We need further information on this matter, and also, if possible a project where the issue can be observed on our side.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jones]

Hello!

I can give you any information you need. I'm using Delphi 2007 with .NET Framework 2.0. As webserver I'm using Microsoft IIS. The Server is an Windows 2003 Server, but it also happens on my pc (XP Professional SP3). What else do you need to know? I do not use an external css. Here's the ASPX Code of the Login-Page of my company. If you would like to check out problem yourselv, just take the IE7 or IE8 and visit...

I really hope you can help.



ASPX-Code
<%@ Page Language="c#" Debug="true" MasterPageFile="~/MasterPage_Without_Menu.master" Codebehind="Login.pas" AutoEventWireup="false" Inherits="login.TLogin" Title="ebm-papst Produktdokumentation" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content id="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">&nbsp;

  <CENTER>
    <asp:Panel id="Panel2" runat="server" align="center" height="98px" defaultbutton="btnAnmelden" width="274px">
      <TABLE style="BORDER-TOP-STYLE: double; BORDER-RIGHT-STYLE: double; BORDER-LEFT-STYLE: double; BORDER-COLLAPSE: collapse; BORDER-BOTTOM-STYLE: double" bordercolor="#c3d9ff" cellspacing="2" cellpadding="2" rules="groups" width="100%" align="center"
             bgcolor="#e8eefa" border="2">
        <thead>
          <tr>
            <td style="HEIGHT: 26px">
              <asp:Label id="lblAnmeldung" runat="server" text="Anmeldung" font-bold="True" font-names="Arial" font-size="11pt"></asp:Label></td>
            <td style="HEIGHT: 26px">
              <asp:Label id="lblMessage" runat="server" font-names="Arial" font-size="9.5pt" visible="False" forecolor="Red"></asp:Label></td>
          </tr>
          <tr>
            <td style="BORDER-TOP: white 2px solid">
              <asp:Label id="lblBenutzername" runat="server" text="Benutzername" font-names="Arial" font-size="9.5pt"></asp:Label></td>
            <td style="BORDER-TOP: white 2px solid">
              <asp:TextBox id="txtUsername" runat="server" width="154px" font-names="Arial"></asp:TextBox></td>
          </tr>
          <tr>
            <td>
              <asp:Label id="lblPasswort" runat="server" text="Passwort" font-names="Arial" font-size="9.5pt"></asp:Label></td>
            <td>
              <asp:TextBox id="txtPasswort" runat="server" width="154px" font-bold="True" font-names="Arial" font-size="9.5pt" textmode="Password"></asp:TextBox></td>
          </tr>
          <tr>
            <td style="HEIGHT: 14px"></td>
            <td style="HEIGHT: 14px">
              <asp:Button id="btnAnmelden" runat="server" text="Anmelden"></asp:Button></td>
          </tr>
        </thead>
      </TABLE>
    </asp:Panel>
  </CENTER>
</asp:Content>

[Martin]

Hellow,

Thanks for the provided code and the online link.

I believe that the problem is caused by the quirks mode that the page is in - your doctype is HTML 4.01, and our controls do not support non-standards compliant pages.

As you know, Internet Explorer automatically triggers quirks mode if the DTD of the page is missing or is non-XHTML, which leads to problems that are hard to handle. I believe that once you change your DTD with one of the XHTML doctypes the problem will be fixed. Unfortunately, I cannot provide you with a fix for quirks mode.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jones]

Hello,

problem solved, thanks!

[Andre Myburgh]

Had the same problem on IE8. The fix was to have the <!DOCTYPE> and <html> in the page with the order and position in the heading of the file as important:

<%

@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="CardManagement.Site" %>

 

<%

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

 

<%

@ Register src="Common/ApplicationMenu.ascx" tagname="ApplicationMenu" tagprefix="uc1" %>

 

<%

@ Register src="Common/PageTitle.ascx" tagname="PageTitle" tagprefix="uc2" %>

 

<!

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<

 

html xmlns="http://www.w3.org/1999/xhtml">

 

<

 

script src="../WebServiceBindingScripts.js" type="text/javascript"></script>