jqgrid - table headers label alignment problem in IE

i have problem with jqgrid headers.

in firefox it is displaying properly as shown below...

in IE7 it is displaying as shown below...

can anyone solve my problem...

i used the following html for jqgrid

< table id="list" cellpadding="0" cellspacing="0">< /table>

< div id开发者_如何学运维="pager" >< /div>

I think this is a known issue because I've seen it, too - mostly in IE9. If, for example, you have a title that is too long inside of a narrower column, it bumps the contents of the column in that header row out of alignment and part of the word will overlap the next column as if the "overflow" on the class is being ignored.

As a quick fix, if you set the column width to be wider than the text that is in the header, it will not show that alignment problem. I know this is not really a best-case solution because if someone manually collapses the width on that column, it will mess up the alignment again.

Best I can tell when I look at the CSS for jqGrid, the <div> that hold the text inside of the <th> for that row has an overflow compatibility issue with the styles applied to the <th> itself which control white-space, float and text-align.