Double Rad Split Bar in Compatibility Mode

[George]

We are seeing double rad split bars (only horizontal bars) when using IE 7 and 8/9 in compatibilty mode. Is there any way to fix this problem? I have attached a picture to show the double rad split bar.


Here's the code we're using:

<div style="width:100%;height:100%;" id="divcontent">
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" VisibleDuringInit="false">
                <telerik:RadPane ID="RadPane1_Left" runat="server" Scrolling="None">
                    <telerik:RadSplitter ID="RadSplitter2" SplitBarSize="0" runat="server" Orientation="Horizontal" PanesBorderSize="0" BorderSize="0">
                        <telerik:RadPane ID="RadPane1_menu" runat="server" Scrolling="None">
                            <asp:ContentPlaceHolder ID="RecordLockingBar" runat="server">
                            </asp:ContentPlaceHolder>
                            <asp:ContentPlaceHolder ID="ToolbarContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="None" EnableResize="false" CssClass="dcursor" />
                        <telerik:RadPane ID="RadPane1_Left_Top" runat="server">
                            <asp:ContentPlaceHolder ID="FormBodyContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Backward" />
                        <telerik:RadPane ID="RadPane1" runat="server" Height="300px" Collapsed="True">
                            <asp:ContentPlaceHolder ID="FormFooterContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </telerik:RadPane>
                    </telerik:RadSplitter>                    
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Backward" />
                <telerik:RadPane ID="RadPane1_Right" BackColor="#e4eaf6" runat="server" Width="200px">
                    <asp:ContentPlaceHolder ID="FormRightContent" runat="server">
                    </asp:ContentPlaceHolder>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>


Any help is appreciated! Thanks!

[Dobromir]

Hi George,

I tried to reproduce the problem with the provided code snippet but to no avail. I noticed that you have a  custom CssClass set to one of the splitbars and an id set to the wrapper <div>. It is possible a custom global CSS to overwrite some of the default properties of RadSplitbar and that may cause the observed issue. Could you please try to remove all custom CSS registered on the page and see if the problem still occurs? However, to be able to provide more to the point answer we will need to reproduce and examine the problem locally, could you please open a formal support ticket and provide a fully runnable sample project reproducing the issue?

All the best,
Dobromir
the Telerik team

[George]

I found this line in our css file causes the issue:

select, option, input, td, div, textarea, span, label, button {font-family: Verdana, Helvetica, Arial; font-size: 11px;}

If I take that line out, it looks fine in compatibility mode. Do you know what that line would cause that?

[Dobromir]

Hi George,

Try to add the following bit of code to your CSS to restore the default value of RadSplitter:

*+html .RadSplitter .rspResizeBarHorizontal div {font-size: 1px !important;}

On a side note, using global CSS selectors when working with third-party controls is highly not recommended. As you have already noticed it may cause some visualization glitches.

Best wishes,
Dobromir
the Telerik team