RadButtons Moving on MouseOver

[Brian]

I'm using two RadButtons skinned with Windows7 skin in a .Net 3.5 ASP.Net web application.  Here's the relevant markup:

<asp:Panel ID="pnlCancelRequestConfirmation" runat="server" style="display: none;"  CssClass="CancelRequestModalPopUp">
    <div style="background-color: White; border: 2 solid black; padding: 10px;">
        Enter the reason for removing this SRF:<br />
        <asp:TextBox ID="txtCancelReason" runat="server" Width="200px"></asp:TextBox>
        <br />
        <asp:RequiredFieldValidator ID="rfvCancelReason" runat="server" ValidationGroup="CancelRequestConfirmationGroup"
            ControlToValidate="txtCancelReason" ErrorMessage="Reason is required" CssClass="SrfRedText"
            Display="Dynamic" />
        <br />
        <br />
        <div style="text-align: right;">
            <telerik:RadButton ID="btnCancelSrfCancelRequest" runat="server" Text="Remove SRF" OnClick="btnCancelSrfCancelRequest_Click" CausesValidation="true" ValidationGroup="CancelRequestConfirmationGroup"></telerik:RadButton>
            <telerik:RadButton ID="btnCloseSrfCancelRequest" runat="server" Text="Cancel" CausesValidation="false"></telerik:RadButton>
        </div>
        <br />
        <div style="text-align: right;">
            <asp:Button ID="btnTest" runat="server" Text="ASP.Net Button" />
        </div>
    </div>
</asp:Panel>

This code is being displayed in an Ajax Toolkit Modal Popup.  But this happens elsewhere in my code as well.  I think I've isolated it to some jQuery behavior but I'm not sure how to prevent it.  If I use a normal ASP.Net button, I don't get this behavior.

When I tab out of the textbox above the buttons, the buttons shift to the left.  When I mouse over them, they reposition back to where they are supposed to be. 

Here's a screencast to show what I'm talking about:

http://screencast.com/t/sM21Z1WPZZ

Has anyone experieced this problem?  If so, what should I do to fix it?

Thanks.

[Brian]

My company just assigned a license to me and we have priority support.  I just wanted to make sure that you know that I have two accounts - one for my self (username: Brian) and one for my company (this account).

Thanks,

Brian

[Slav]

Hi Brian,

Indeed, under Internet Explorer 7 I was able to reproduce the described behavior. After examining the provided sample I can suggest a solution. Please specify width for the ASP Panel control that contains the RadButtons:

<asp:Panel ID="pnlCancelRequestConfirmation" runat="server" style="display: none;width: 300px;"  CssClass="CancelRequestModalPopUp">

          .......

</asp:Panel>

If you want to apply the fix, presented above, only when using IE7, you can achieve this via CSS hacks, as in the following example:

Place this code in the head section of your page:

<style type="text/css">
    * + html .ie7Width
    {
        width: 300px;
    }
</style>

Apply the CSS class to the Panel control:

<asp:Panel ID="pnlCancelRequestConfirmation" runat="server" Style="display: none;"

    CssClass="CancelRequestModalPopUp ie7Width">

             .......

</asp:Panel>

Please note that as now you are client with priority support you have access to sending support tickets, which you are advised to use as they include guaranteed response time and the problems that you report will get more attention. You can check the Support Plans page for more information on the features, included in every Support Package.

All the best,
Slav
the Telerik team

[Brian]

Works like a charm!  Thanks. 

There was no real rush on this so I just posted to the forum.  I just used standard buttons until we could find a fix for the problem. 

Thanks again,

Brian