Differences in layout between localhost and IIS

[Cliff Gibson]

I've got a page that contains a Dock Layout but when I view in localhost from VS2010 (F5), Win 7, IE8 the layout is good yet once I publish to Windows Server 2003 and IIS6 and view from the same client machine the layout changes.

Published version renders OK when viewing from Firefox.

Screenshots attached along with code below...

Any ideas where I'm going wrong?

Cheers
Cliff

<telerik:RadDockLayout ID="RadDockLayoutDefaultPage" runat="server">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <telerik:RadDockZone ID="RadDockZoneLeft" runat="server" Height="490px" Width="610px">
                        <telerik:RadDock ID="RadDockEvents" runat="server" Width="95%" Title="Upcoming Events">
                            <Commands>
                                <telerik:DockExpandCollapseCommand />
                                <telerik:DockCommand AutoPostBack="false" Name="Add Event" CssClass="DockAdd" Text="Add Event" OnClientCommand="openRadWinCreateEvent" />
                            </Commands>
                            <ContentTemplate>
                                 <telerik:RadGrid ShowHeader="False"
                                    ID="RadGridEvents" runat="server" GridLines="None" Width="99%"
                                    onneeddatasource="RadGridEvents_NeedDataSource"
                                    onitemdatabound="RadGridEvents_ItemDataBound"
                                    OnSelectedIndexChanged="RadGridEvents_SelectedIndexChanged"
                                    onprerender="RadGridEvents_PreRender" >
                                    <MasterTableView TableLayout="Fixed">
                                        <ItemTemplate>
                                            <%# (((GridItem)Container).ItemIndex != 0)? "</td></tr></table>" : "" %>
                                            <asp:Panel ID="panelEventLine" runat="server"
                                                CssClass='<%# (((GridItem)Container).ItemType == GridItemType.Item)? "eventItem" : "eventAlternatingItem" %>'>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td colspan="4" align="center">
                                                            <asp:Label ID="lblEventID" runat="server" style="display:none" Text='<%# Eval("EventID") %>'></asp:Label>
                                                            <asp:Label ID="lblEventColour" runat="server" style="display:none" Text='<%# Eval("EventColour") %>'></asp:Label>
                                                            <asp:LinkButton ID="lbtnEventTitle" runat="server" CommandName="Select" Text='<%# Eval("EventTitle") %>'></asp:LinkButton>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <b>Start: </b>
                                                        </td>
                                                        <td>
                                                            <asp:Label ID="lblStartDate" runat="server" Text='<%# Eval("StartDate") %>'></asp:Label>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td align="center">
                                                            <b>High</b>
                                                        </td>
                                                        <td align="center">
                                                            <b>Late</b>
                                                        </td>
                                                        <td align="center">
                                                            <b>All</b>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center">
                                                            <asp:LinkButton ID="lbtnHighTasks" ToolTip="Show High Tasks" runat="server" CommandName="High Tasks" Text="2"></asp:LinkButton>
                                                        </td>
                                                        <td align="center">
                                                            <asp:LinkButton ID="lbtnLateTasks" ToolTip="Show Late Tasks" runat="server" CommandName="Late Tasks" Text="1"></asp:LinkButton>
                                                        </td>
                                                        <td align="center">
                                                            <asp:LinkButton ID="lbtnAllTasks" ToolTip="Show All Tasks" runat="server" CommandName="All Tasks" Text="6"></asp:LinkButton>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </asp:Panel>
                                        </ItemTemplate>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
                <td>
                    <telerik:RadDockZone ID="RadDockZoneRight" runat="server" Height="490px" Width="310px">
                        <telerik:RadDock ID="RadDockTasks" runat="server" Width="100%" Title="Tasks">
                            <Commands>
                                <telerik:DockExpandCollapseCommand />
                                <telerik:DockCommand AutoPostBack="false" Name="Add Task" CssClass="DockAdd" Text="Add Task" OnClientCommand="openRadWinCreateTask" />
                            </Commands>
                            <ContentTemplate>
                                <telerik:RadGrid ClientSettings-Scrolling-AllowScroll="false" ShowHeader="False"
                                    ID="RadGridTasks" runat="server" AutoGenerateColumns="False"
                                    GridLines="None" Width="99%"
                                    onneeddatasource="RadGridTasks_NeedDataSource"
                                    onitemdatabound="RadGridTasks_ItemDataBound">
                                    <ClientSettings>
                                        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                                    </ClientSettings>
                                    <MasterTableView DataKeyNames="TaskID">
                                    <RowIndicatorColumn>
                                    <HeaderStyle Width="20px"></HeaderStyle>
                                    </RowIndicatorColumn>
                                    <ExpandCollapseColumn>
                                    <HeaderStyle Width="20px"></HeaderStyle>
                                    </ExpandCollapseColumn>
                                        <Columns>
                                            <telerik:GridBoundColumn DataField="TaskID" Visible="False" />
                                            <telerik:GridBoundColumn DataField="TaskTitle" HeaderText="Task" />
                                            <telerik:GridTemplateColumn HeaderText="Due" ItemStyle-HorizontalAlign="Center">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblDueDate" runat="server" Text='<%# Eval("DueDate") %>'></asp:Label>
                                                </ItemTemplate>
                                                <ItemStyle HorizontalAlign="Center" />
                                            </telerik:GridTemplateColumn><telerik:GridTemplateColumn HeaderText="Event" ItemStyle-HorizontalAlign="Center">
                                                <ItemTemplate>
                                                    <asp:Label ID="lblEventColour" runat="server" Text='<%# Eval("EventColour") %>' style="display:none"></asp:Label>
                                                    <asp:Label ID="lblEventTitle" runat="server" Text='<%# Eval("EventTitle") %>' style="display:none"></asp:Label>
                                                    <asp:Button ID="btnEventColour" runat="server" Enabled="false" BorderStyle="None" EnableTheming="False" CssClass="NonDecoratedItem" Height="15px" Width="25px" Text=" " />
                                                </ItemTemplate>
                                                <ItemStyle HorizontalAlign="Center" />
                                            </telerik:GridTemplateColumn>
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
            </tr>
        </table>
    </telerik:RadDockLayout>

[Pero]

Hi Cliff,

This problem is related to the IE7 browser. The default browser of IIS 6.0 is IE7, and that's why you are experiencing the issue when running the web site on IIS 6.0. For instance if you observe the following example: http://demos.telerik.com/aspnet-ajax/dock/examples/zoneorientation/defaultcs.aspx, under IE7 and FF, you will notice differences - scrollbars will appear under IE7 (or IE8-compatibility view).

More information on how to avoid this behavior can be found on this forum post.

Sincerely yours,
Pero
the Telerik team