[Solved] Why are column headers wider by 16px in IE7?!

[Troy]

This is driving me crazy.  Just for an example, go to:  

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/webmail/defaultcs.aspx

using IE8.  Take note of the width of the column headers.  Now switch to compatibilty mode. 

See what I'm talking about?  I tested out IE7 on a different machine and it still makes them wider. 

FF3.5 and IE8 seem to display them the same. I haven't tested out older FF versions or Safari.  But I will.

This is a royal pain -- I have some very limited real estate and I'm trying not to have to horizontal scroll -- so I have each column headerstyle and itemstyle explicitly set to widths that I know will fit.  And it works great.  UNTIL I have to use IE7.   I'd love to just tell folks they have to use IE8 or FF, but tons and tons of people are still using older browsers.


Please don't make me go back to the days of developing for NetScape and IE. 

Any help would be appreciated.

Troy

[Troy]

Oh yeah, Chrome 2.0 works like IE8 and FF3.5

[Troy]

FF3 works like IE7.  Which really, really sucks because those two browsers together represent a HUGE installation base.

FF2 works like IE8 and FF3.5 and Chrome 2.0.

Still haven't test Safari.

Ugh. 

These tests are all on Windows machines, btw.  XP, Vista and 7.

[Pavel]

Hi Troy,

This is a known browser behavior which you can workaround by removing the padding of the header cells with the following css:

<style type="text/css">
    .RadGrid_Vista .rgHeader
    {
        padding-left:0 !important;
        padding-right:0 !important;
    }
</style>

I hope this helps.

Best wishes,
Pavel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Troy]

The CSS solution still acts a little wonky.  Header text is to the far left and the columns are still a bit wider.

Here is what I came up with instead:

protected void RadGrid1_PreRender(object sender, EventArgs e)
        {
            //IE7, IE8, Firefox3.5, Firefox3.0.11
           if ((Request.Browser.Type == "IE7" || Request.Browser.Type.Contains("Firefox3.0")) && !IsPostBack)                
                {
                foreach(GridColumn gridcolumn in radgridGeography.Columns) {
                    if (gridcolumn.HeaderStyle.Width.Value > 16)
                    {
                        int newWidth = Convert.ToInt32(gridcolumn.HeaderStyle.Width.Value) - 16;
                        gridcolumn.HeaderStyle.Width = Unit.Pixel(newWidth);
                        gridcolumn.ItemStyle.Width = Unit.Pixel(newWidth);
                    }
                }
            }
        }

Where you can set the number 16 to whatever you need to shrink the columns by.  I've found that 14-16 works well.

Troy