Inconsistent command item rendering varying between DIV and Table layout

[Bryan]

I am using the built-in Export to Excel and Refresh buttons. Strangely when deployed to local and remote environment the layout differs - DIV at local and Table TR for remote, out of the same code base. The left aligned layout, one shown in the first screen capture, is the desired outcome. Can confirm this absurd behaviour is only present on IE (Same browser configuration on different terminals used to test both environments and had consistent results) - Chrome and Firefox have been tested to be rendering the desired layout on both environment.

Here is my RadGrid markup:

<asp:Panel ID="pnlMainReport" runat="server">
               <telerik:RadGrid ID="rgRecReport" runat="server" DataSourceID="dsRec" AllowAutomaticUpdates="False"
                   RenderMode="Lightweight" AllowMultiRowSelection="false"
                   Skin="Metro"  AllowPaging="true"
                  OnItemDataBound="rgRecReport_ItemDataBound"
                   CssClass="RemoveBorders">
                   <ClientSettings EnableAlternatingItems="false" EnableRowHoverStyle="true">
                       <Selecting AllowRowSelect="true" />
                       <ClientEvents OnRowClick="ReportContextMenu" OnRowContextMenu="ReportContextMenu" />
                   </ClientSettings>
                   <MasterTableView AutoGenerateColumns="False" DataSourceID="dsRec" DataKeyNames="ResultTableName"   PageSize="100"
                       CommandItemDisplay="Top"  CommandItemSettings-ShowExportToExcelButton="true" CommandItemSettings-ExportToExcelImageUrl="~/images/excel.png" CommandItemSettings-ShowAddNewRecordButton="false">

HTML of the incorrect layout on IE:

<tr>
                                    <td align="left"> </td><td align="right"><input name="rgRecReport$ctl00$ctl02$ctl00$RefreshButton" title="Refresh" class="rgRefresh" id="rgRecReport_ctl00_ctl02_ctl00_RefreshButton" onclick="javascript:__doPostBack('rgRecReport$ctl00$ctl02$ctl00$RefreshButton','')" type="button" value=" "><a id="rgRecReport_ctl00_ctl02_ctl00_RebindGridButton" href="javascript:__doPostBack('rgRecReport$ctl00$ctl02$ctl00$RebindGridButton','')">Refresh</a>   |   <a id="rgRecReport_ctl00_ctl02_ctl00_ExportToExcelButton" href="javascript:__doPostBack('rgRecReport$ctl00$ctl02$ctl00$ExportToExcelButton','')"><img style="border: 0px currentColor; border-image: none;" alt="" src="/images/excel.png"> Export to Excel</a>  </td>
                                </tr>

[Maria Ilieva]

Hello,

I suppose that the issue you are facing comes form the fact that in the problematic case the applictaion runs in compatibility mode of the IE browser which restore to IE7 and the Lightweight RenderMode and the Material skin does not work in it as they are supported for the newer versions of IE.
Please check if this is the case on your and and force the IE to run in the correct mode.

Regards,
Maria Ilieva
Telerik

[Bryan]

Thanks for that Maria.

We indeed got the IE 11 compatibility tag up first in the header but somehow it was ignored...

Unchecking "Display Intranets in Compatibility View" in the menu solved the problem.

[Maria Ilieva]

Hi Bryan,

I'm glad you were able to fix the issue on your end. Do not hesitate to contact us back in case further assistance is needed.

Regards,
Maria Ilieva
Telerik