[2.??][CLOSED] Grid Column Overlap IE

[nicholasnet]

I tried to solve this problem for 2 days I think it is a bug since this works perfectly in any other except for IE. In one of my grid one column is overlapping another. I am using filter as my plugin here. Please see attached image for more information.
Here is m code

incomeTrack.drillDownAnalysis = function()
{
    incomeTrack.clearCenter();
    Ext.menu.RangeMenu.prototype.icons = {
      gt: BASEURL+'img/fam/greater_then.png', 
      lt: BASEURL+'img/fam/less_then.png',
      eq: BASEURL+'img/fam/equals.png'
    };
    
    Ext.grid.filter.StringFilter.prototype.icon = BASEURL+'img/fam/find.png';
    
    var ds = new Ext.data.JsonStore
    ({
          url: BASEURL+'incomes/drillDown',
        id: 'id',
        totalProperty: 'total',
        root: 'incomes',
        fields: 
        [
            {name:'id'}, 
              {name:'date', type: 'date', dateFormat: 'Y-m-d'}, 
              {name:'amount', type: 'float'},
              {name:'productline'},
              {name:'type'},
              {name:'region'},
              {name:'country'},
              {name:'first_name'}
        ],
          sortInfo: {field: 'date', direction: 'DESC'},
          remoteSort: true
    });
    
    var filters = new Ext.grid.GridFilters
    ({
      filters:[
        {type: 'date',  dataIndex: 'date'},
        {type: 'numeric',  dataIndex: 'amount'},
        {
            type: 'list', 
            dataIndex: 'productline',
            options: ['Vasco', 'Degama','Tarpo','Tady'],
            phpMode: true
        },
        {
            type: 'list', 
            dataIndex: 'type',
            options: ['Retail', 'Distributor'],
            phpMode: true
        },
        {
            type: 'list', 
            dataIndex: 'region',
            options: ['Asia', 'Africa','Europe', 'North America','Oceania','South America'],
            phpMode: true
        },
        {type: 'string', dataIndex: 'country'},
        {type: 'string', dataIndex: 'first_name'}
    ]});

    
    var cm = new Ext.grid.ColumnModel
    ([
      {dataIndex: 'date', header: 'Date', renderer: Ext.util.Format.dateRenderer('m/d/Y')},
      {dataIndex: 'amount', header: 'Amount', align: 'right', width: 140, renderer: Ext.util.Format.usMoney},
      {dataIndex: 'productline', width: 140, header: 'Product Line'},
      {dataIndex: 'type', width: 120, header: 'Sales Type'},
      {dataIndex: 'region', width: 120, header: 'Region'},
      {dataIndex: 'country', width: 180, header: 'Country'}, 
      {dataIndex: 'first_name',header: 'Entered By', id:'enteredby'}
    ]);

    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel
    ({
        id: 'drillDown',
           ds: ds,
          cm: cm,
          enableColLock: false,
          loadMask: true,
          plugins: filters,
          height: Ext.get('tabpanel').getHeight()- 29,
          width:'100%',        
          autoExpandColumn: 'enteredby',
          bbar: new Ext.PagingToolbar
          ({
            store: ds,
            pageSize: 30,
            plugins: filters
          })
    });

    grid.render('container');
    ds.load({params:{start: 0, limit: 30}});
}; 

Any Clue why this is happening

[jack.slocum]

Two of your columns are missing widths?

[nicholasnet]

Thanks you for the reply but unfortunately I already tried that solution before it did not worked. This is what I did

var cm = new Ext.grid.ColumnModel
    ([
      {dataIndex: 'date', header: 'Date', width: 120, renderer: Ext.util.Format.dateRenderer('m/d/Y')},
      {dataIndex: 'amount', header: 'Amount', align: 'right', width: 140, renderer: Ext.util.Format.usMoney},
      {dataIndex: 'productline', width: 140, header: 'Product Line'},
      {dataIndex: 'type', width: 120, header: 'Sales Type'},
      {dataIndex: 'region', width: 120, header: 'Region'},
      {dataIndex: 'country', width: 180, header: 'Country'}, 
      {dataIndex: 'first_name',header: 'Entered By', width: 140, id:'enteredby'}
    ]); 

AND

var cm = new Ext.grid.ColumnModel
    ([
      {dataIndex: 'date', header: 'Date', width: 120, renderer: Ext.util.Format.dateRenderer('m/d/Y')},
      {dataIndex: 'amount', header: 'Amount', align: 'right', width: 140, renderer: Ext.util.Format.usMoney},
      {dataIndex: 'productline', width: 140, header: 'Product Line'},
      {dataIndex: 'type', width: 120, header: 'Sales Type'},
      {dataIndex: 'region', width: 120, header: 'Region'},
      {dataIndex: 'country', width: 180, header: 'Country'}, 
      {dataIndex: 'first_name',header: 'Entered By', id:'enteredby'}
    ]); 

[nicholasnet]

Alright I found the solution. This is not the bug of ExtJS but it is the bug of CSSTidy. Since I am using CSSTidy to compress my CSS this was causing that problem. Sorry for marking this as a bug in this forum.