Inconsistent Column Widths with Static Header

[bob]

Although I've seen other threads in the forum discussing best practices for column widths when static headers are enabled, I have not been able to figure out how you should set columns widths / master view widths in order to produce columns that render consistently across IE, Firefox and Chrome.

In the attached mockup, I have a grid with static headers and specific column widths. In IE 7, the header columns are not consistent with the item columns.Additionally, the last column is not displayed. In Chrome or IE 8, the grid appears to display fine.

Any help would be appreciated.

Thanks. 

Here is the grid source:

<telerik:RadGrid ID="grdHotListView" runat="server" AutoGenerateColumns="false"
    CssClass="search_results" GridLines="Vertical" Skin="" EnableEmbeddedSkins="false"
    AllowSorting="true" ImagesPath="img" Width="760">
    <HeaderStyle Height="30px" CssClass="grid_header_row" />
    <ClientSettings EnablePostBackOnRowClick="false">
        <Selecting AllowRowSelect="True" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="250px" SaveScrollPosition="True" />
    </ClientSettings>
    <MasterTableView Width="740px" Font-Names="Arial, Helvetica, sans-serif" AllowNaturalSort="false" ShowHeadersWhenNoRecords="true"
        GridLines="None">
        <Columns>
            <telerik:GridBoundColumn HeaderStyle-Width="180px" HeaderText="<h2>Name</h2>" DataField="StudentName" SortExpression="StudentName" ItemStyle-HorizontalAlign="Center"  ItemStyle-CssClass="icon" />
            <telerik:GridHyperLinkColumn HeaderStyle-Width="100px" SortExpression="StudentNumber" DataNavigateUrlFields="StudentId" DataNavigateUrlFormatString="~/documenttracking.aspx?studentid={0}" DataTextField="StudentNumber" HeaderText="<h2>ID</h2>" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon"/>
            <telerik:GridTemplateColumn HeaderText="<h2>C</h2>" HeaderStyle-Width="20px" HeaderTooltip="Contact/Personal Information/Account Creation" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("AdmissionApplicationDetail.StudentInfoStatus.IconOption")) %>'
                        Visible='<%# Eval("AdmissionApplicationDetail.StudentInfoStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>P</h2>" HeaderStyle-Width="20px" HeaderTooltip="Program and Start Date Selection" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("AdmissionApplicationDetail.ProgramStatus.IconOption")) %>'
                        Visible='<%# Eval("AdmissionApplicationDetail.ProgramStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>H</h2>" HeaderStyle-Width="20px" HeaderTooltip="High School or GED" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("AdmissionApplicationDetail.HSStatus.IconOption")) %>'
                        Visible='<%# Eval("AdmissionApplicationDetail.HSStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>A</h2>" HeaderStyle-Width="20px" HeaderTooltip="Academic History (post secondary)" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("AdmissionApplicationDetail.CollStatus.IconOption")) %>'
                        Visible='<%# Eval("AdmissionApplicationDetail.CollStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>P</h2>" HeaderStyle-Width="20px" HeaderTooltip="Proficiency Questions" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("AdmissionApplicationDetail.CompStatus.IconOption")) %>'
                        Visible='<%# Eval("AdmissionApplicationDetail.CompStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>T</h2>" HeaderStyle-Width="20px" HeaderTooltip="Terms and Conditions" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("AdmissionApplicationDetail.TermsConditionsStatus.IconOption")) %>'
                        Visible='<%# Eval("AdmissionApplicationDetail.TermsConditionsStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>E</h2>" HeaderStyle-Width="20px" HeaderTooltip="Enrollment Agreement" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("AdmissionApplicationDetail.EnrollmentAgreementStatus.IconOption")) %>'
                        Visible='<%# Eval("AdmissionApplicationDetail.EnrollmentAgreementStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2> </h2>" HeaderStyle-Width="10px" ItemStyle-CssClass="icon">
                <ItemTemplate> </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>O</h2>" HeaderStyle-Width="20px" HeaderTooltip="Financial Options Selections" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("FinancialApplicationDetail.FOStatus.IconOption")) %>'
                        Visible='<%# Eval("FinancialApplicationDetail.FOStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>D</h2>" HeaderStyle-Width="20px" HeaderTooltip="Dependency" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("FinancialApplicationDetail.DEPStatus.IconOption")) %>'
                        Visible='<%# Eval("FinancialApplicationDetail.DEPStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>C</h2>" HeaderStyle-Width="20px" HeaderTooltip="Other Colleges" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("FinancialApplicationDetail.OtherColStatus.IconOption")) %>'
                        Visible='<%# Eval("FinancialApplicationDetail.OtherColStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>R</h2>" HeaderStyle-Width="20px" HeaderTooltip="Other Resources" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("FinancialApplicationDetail.OtherResStatus.IconOption")) %>'
                        Visible='<%# Eval("FinancialApplicationDetail.OtherResStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>A</h2>" HeaderStyle-Width="20px" HeaderTooltip="Funds Authorization" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("FinancialApplicationDetail.FundAuthStatus.IconOption")) %>'
                        Visible='<%# Eval("FinancialApplicationDetail.FundAuthStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>F</h2>" HeaderStyle-Width="20px" HeaderTooltip="FAFSA" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("FinancialApplicationDetail.FAFSAStatus.IconOption")) %>'
                        Visible='<%# Eval("FinancialApplicationDetail.FAFSAStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>M</h2>" HeaderStyle-Width="20px" HeaderTooltip="MPN" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("FinancialApplicationDetail.MPNStatus.IconOption")) %>'
                        Visible='<%# Eval("FinancialApplicationDetail.MPNStatus.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2> </h2>" HeaderStyle-Width="10px" ItemStyle-CssClass="icon">
                <ItemTemplate> </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>H</h2>" HeaderStyle-Width="20px" HeaderTooltip="High School Transcript" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.HsTranscript.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.HsTranscript.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>T</h2>" HeaderStyle-Width="20px" HeaderTooltip="College Transcipt" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.CollTranscriptCount.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.CollTranscriptCount.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>F</h2>" HeaderStyle-Width="20px" HeaderTooltip="FAFSA/ISIR" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.FafsaIsir.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.FafsaIsir.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>A</h2>" HeaderStyle-Width="20px" HeaderTooltip="Funds Authorization" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.FundsAuth.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.FundsAuth.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>S</h2>" HeaderStyle-Width="20px" HeaderTooltip="Stafford" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.Stafford.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.Stafford.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>C</h2>" HeaderStyle-Width="20px" HeaderTooltip="Competency Exams" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image Irunat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.CompExams.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.CompExams.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>A</h2>" HeaderStyle-Width="20px" HeaderTooltip="Academic Complete Signoff" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.AmSign.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.AmSign.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn HeaderText="<h2>F</h2>" HeaderStyle-Width="20px" HeaderTooltip="Financial Complete Signoff" ItemStyle-HorizontalAlign="Center" ItemStyle-CssClass="icon">
                <ItemTemplate>
                    <asp:Image runat="server" ImageUrl='<%# String.Format("~/img/app-{0}.gif", Eval("DocumentDetail.FaSign.IconOption")) %>'
                        Visible='<%# Eval("DocumentDetail.FaSign.IsIconVisible") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

[Pavlina]

Hello Bob,

I followed your scenario and prepared a simple test project which is working as expected in IE 7. Please examine it and let me know if it helps to resolve the issue or if I am leaving something important out.

Greetings,
Pavlina
the Telerik team