Margin Issues with Compatibility View

[Brian]

Hi,

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;"/>
</telerik:RadSlidingPane>
</telerik:RadSlidingZone>
</telerik:RadPane>
</telerik:RadSplitter>

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!

Regards,
Brian Chambers

[Shinu]

Hi Brian,

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

ASPX:

<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;" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
</telerik:RadSplitter>

Thanks,
Shinu.