Margin Issues with Compatibility View

2 posts, 0 answers
  1. Brian
    Brian avatar
    37 posts
    Member since:
    Aug 2013

    Posted 11 Dec 2013 Link to this post


    I have a button with all four margins set to 5px in a sliding pane.  I am doing this so that there is some space between the pane and my control.  However, when in IE8/IE9 compatibility view, the button will incorrectly align itself to the left of the pane.  (see before hover.png)  On hover, the button will move to the correct spot.  (see after hover.png)  When not in compatibility view, everything works as intended.

    Default.aspx (snippet)
    <telerik:RadSplitter runat="server">
    <telerik:RadPane runat="server">
    <telerik:RadSlidingZone runat="server">
    <telerik:RadSlidingPane runat="server" Title="Slider">
    <telerik:RadButton runat="server" Text="Hover" style="margin: 5px;"/>

    There is no code-behind, and this is using a default Telerik ASP.NET web application.  I can provide a complete project if necessary -- this is just a short mock-up that I wrote to illustrate the issue.

    Is this a known problem, or am I using my CSS margins incorrectly?

    Thank you very much for your time!

    Brian Chambers
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Dec 2013 Link to this post

    Hi Brian,

    Please try the following code snippet which works fine at my end.

    <telerik:RadSplitter ID="RadSplitter1" runat="server">
        <telerik:RadPane ID="RadPane1" runat="server">
            <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
                <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Slider">
                    <telerik:RadButton ID="RadButton1" runat="server" Text="Hover" style="margin:5px; position:fixed;" />

Back to Top