Start Building Professional
Web Apps Today

dhtmlxGrid header and cells alignment problem

Hi,
I have been trying to pick a datatable widget for a project I plan to work on soon. During this prelimary phase, I've already checked YUI datatable and Dojo's Dijit grid.
With dhtmlx grid, the problem I encounter is a cumulative offset through columns: within a column, the header and cells left and right lines do not align properly: only the first column's left line is a straight line. A screen capture is available at http://img296.imageshack.us/img296/4772/datatablequ9.png
It seems like there is a 2 pixel value that gets substracted from header width to have the cells width, and this happens for each column. In the end, the total width on a cell line is always lower than the headers line width.
I would really appreciate any clue or idea to solve this problem.
Here is the last section of my grid creation function; is there something I am doing wrong ?

    mygrid.setHeader(headers);
    mygrid.setInitWidthsP(widths);
    mygrid.setColSorting(ColSorting);
    mygrid.setColTypes(ColTypes);
    mygrid.setColAlign(ColAlign);
    // set skin
    mygrid.setSkin("light");
    var url = ViewDataGrid_dhtmlx.dataGrid_buildUrl(KBdatagid);
    // set dataGrid to load datas on scroll
    mygrid.setXMLAutoLoading(url);
    mygrid.init();
    mygrid.enableAlterCss("ev_light","odd_light");
    mygrid.loadXML(url);
    mygrid.dataUrl=url;
    // add filter Actions
    ViewDataGrid_dhtmlx.dataGrid_addFilter(KBdatagid,mygrid);
    mygrid.setSizes();

    // bind dataGrid events to functions
    mygrid.attachEvent("onRowSelect",RowActions_dhtmlx.onRowSelect);
    mygrid.sortRowsOrg=mygrid.sortRows;
    mygrid.sortRows= ColumnActions.sort;
    // return full configured Dhtmlx DataGrid
    return mygrid;

Thank you.

>>I would really appreciate any clue or idea to solve this problem.
The issue caused by css styles confilct, it seems that you are have some css rule which affect TH elements
To resolve such problem you can use next css rule on the page

div.gridbox table.obj th, div.gridbox table.hdr th{
 padding:0px 0px 0px 0px ;
 margin:0px 0px 0px 0px ;
}

It must reset any custom padding|margin, assigned through custom styles , for the columns of grid. 

If issue still occurs for you - please provide any kind of sample where  problem can be reconstructed ( you can send sample directly to support@dhtmlx.com ) 

Thank you so much! I just added the lines you provided at the end of dhtmlxgrid.css and it solved the problem. I can't believe it was a css thing...