Control layouts seem off when IE7 Compatibility Mode and certain layouts

[James Daresta]

I am seeing a weird occurrence with control rendering and such when going from IE 8 standards mode to IE7 Compatibility mode. It also seems to be affected by the resizing of the browser when in compatibility. Attached are two screen two screen shots. As you can see the compatibility mode just does not layout right with the standard skin. Its not horrible, but on the button especially it looks odd. Here is the code I have. Not sure what I can do to fix this. I do have my own style sheet being used also, but ont he button and combos there are none of my css styles being applied. Thanks.

 

<table class="ContentTableBordered" cellspacing="0" cellpadding="3" width="99%" align="center">
        <tr>
            <td class="ContentTableCellTitleDark" height="20" colspan="9">
                <table width="100%" cellpadding="0" cellspacing="0" style="margin:0px 0px 0px 0px;" border="0">
                   <tr>
                        <td>
                            <asp:Literal ID="lblFilterLabel" runat="server" Text="Filtering Options"></asp:Literal>
                        </td>
                        <td align="right">
                            <asp:Button ID="btnFilter" runat="server" Text="Set Filter" onclick="btnFilter_Click" Width="100px" />
                        </td>
                   </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblRegionLabel" runat="server" Text="Region:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbRegion" runat="server"
                    DataValueField="Id"
                    DataTextField="Description"
                    DropDownWidth="250px"
                    Height="180px"
                    NoWrap="true"></telerik:RadComboBox>
            </td>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblMaterialGroupLabel" runat="server" Text="Material Group:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbMaterialGroup" runat="server"
                    DataValueField="MaterialGroupNo"
                    DataTextField="Description"
                    DropDownWidth="250px"
                    Height="200px"
                    NoWrap="true"
                    onselectedindexchanged="rcbMaterialGroup_SelectedIndexChanged"
                    AutoPostBack="True"></telerik:RadComboBox>
            </td>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblTradingPartner" runat="server" Text="Trading Partner:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbTradingPartner" runat="server"
                    DataValueField="TradingPartnerNo"
                    DataTextField="Name"
                    DropDownWidth="250px"
                    Height="200px"
                    NoWrap="true"
                    onselectedindexchanged="rcbTradingPartner_SelectedIndexChanged"
                    AutoPostBack="True"></telerik:RadComboBox>
            </td>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblCustomerProfileType" runat="server" Text="Customer Profile Type:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbCustomerProfileType" runat="server"
                    DropDownWidth="200px"
                    Height="70px"
                    NoWrap="true">
                <Items>
                    <telerik:RadComboBoxItem Text="All" Value="" />
                    <telerik:RadComboBoxItem Text="Ship To" Value="ShipTo" />
                    <telerik:RadComboBoxItem Text="Prospect" Value="Prospect" />
                </Items>
                </telerik:RadComboBox>
            </td>
        </tr>
        <tr>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblAccountRepLabel" runat="server" Text="Account Manager:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbAccountManager" runat="server"
                    DataValueField="UserName"
                    DataTextField="DisplayName"
                    DropDownWidth="200px"
                    Height="200px"
                    NoWrap="true"></telerik:RadComboBox>
            </td>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblMaterialLabel" runat="server" Text="Material:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbMaterial" runat="server"
                    DataValueField="MaterialNo"
                    DataTextField="Description"
                    DropDownWidth="250px"
                    Height="200px"
                    NoWrap="true"></telerik:RadComboBox>
            </td>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblCustomerProfileLabel" runat="server" Text="Customer Profile/Ship To:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbCustomerProfile" runat="server"
                    DataValueField="Id"
                    DataTextField="Description"
                    DropDownWidth="400px"
                    Height="200px"
                    NoWrap="true"></telerik:RadComboBox>
            </td>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblStatus" runat="server" Text="Status:"></asp:Label>
            </td>
            <td class="tableSectionDataCell">
                <telerik:RadComboBox ID="rcbStatus" runat="server"
                    DropDownWidth="200px"
                    Height="60px"
                    NoWrap="true">
                <Items>
                    <telerik:RadComboBoxItem Text="All" Value="" />
                    <telerik:RadComboBoxItem Text="Active" Value="Active" />
                    <telerik:RadComboBoxItem Text="Inactive" Value="Inactive" />
                </Items>
                </telerik:RadComboBox>
            </td>
        </tr>
        <asp:PlaceHolder ID="phSummaryViewItems" runat="server" Visible="false">
        <tr>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblForecastSummaryView_TotalByLabel" runat="server" Text="Total By:"></asp:Label>
            </td>
            <td class="tableSectionDataCell" colspan="3">
                <telerik:RadComboBox ID="rcbTotalBy" runat="server"
                    DropDownWidth="250px"
                    Height="200px"
                    NoWrap="true">
                    <Items>
                        <telerik:RadComboBoxItem Text="Region" Value="REGIONID" />
                        <telerik:RadComboBoxItem Text="Material Group" Value="MATERIALGROUPNO" />
                        <telerik:RadComboBoxItem Text="Default Ship Mode" Value="DEFAULTSHIPMODE" />
                        <telerik:RadComboBoxItem Text="Default Plant" Value="DEFAULTPLANTNO" />
                        <telerik:RadComboBoxItem Text="Default Material" Value="DEFAULTMATERIALNO" />
                        <telerik:RadComboBoxItem Text="Account Manager" Value="ACCOUNTMANAGERUSERNAME" />
                    </Items>
                </telerik:RadComboBox>
            </td>
            <td class="tableSectionLabelCell">
                <asp:Label ID="lblForecastSummaryView_PeriodLabel" runat="server" Text="Period:"></asp:Label>
            </td>
            <td class="tableSectionDataCell" colspan="3">
                <telerik:RadComboBox ID="rcbPeriod" runat="server"
                    DataValueField="Id"
                    DataTextField="Description"
                    DropDownWidth="250px"
                    Height="200px"
                    NoWrap="true"></telerik:RadComboBox>
            </td>
        </tr>
        </asp:PlaceHolder>
    </table>

[Rumen]

Hi James,

The reported problem should be fixed in the latest version Q1 2010 SP2 (version 2010.1.519) of RadControls for ASP.NET AJAX. For your convenience I have attached a sample runnable project and video demonstrating that the control styles the comboboxes as expected. The video can be seen at http://screencast.com/t/MWNjNDE2OTct.

Please, test the latest version and if you still experience the problem, please provide steps-by-step instructions demonstrating how to reproduce it on my end.

Sincerely yours,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[James Daresta]

That appears to have fixed it. Thanks for your help.