Grid header is different when site served from server and from local system

[genk_pqgrid]

I have paramquery grid in my ASP.NET website in 2 pages. Both work fine when served from the local ASP.NET dev. server (part of the Visual Studio 2008). However when served from IIS dev. server the grid header is malformed and not aligned with the data rows. I have hidden a column for each of the drop-down editing column - to store the IDs of selected items. Some of these hidden columns are showing and overlaying the corresponding drop-down columns. In the 2nd screenshot the Photo Type column is overlayed by its corresponding ID column - which is not visible in the 1st screenshot.

Any help on this would be greatly appreciated.
I'll provide the source code if needed and any other details.

[paramvir]

Try to remove css/js files one by one other than jQuery & pqGrid files from the web page.

or try to reproduce this issue on jsfiddle which would help to resolve or find the reason for this issue.

[genk_pqgrid]

Thanks. I'll try to reproduce on an isolated page - application made up of only one page with the grid. Then I'll add to this post.

[genk_pqgrid]

Hello, again
I created a fiddle for this:

http://jsfiddle.net/genk_jsfiddle/fRCLz/13/

The behavior is actually happening even on the local system when viewed in FF.
To reproduce in fiddle:
- click button "TEST PQ My Code"
- click button "NEXT ROWS"
- observe 2 grid columns PhotoType and Photo Type - the grid lines of header are not aligned with data rows.

Thanks

[paramvir]

I isolated the colModel from your code and created a new example here

http://jsfiddle.net/LAgZx/202/

It looks fine in FF.

[genk_pqgrid]

Thanks, I'll try to use it in isolation, then inside the ASP.NET app. I'll respond to you when get more info.

[genk_pqgrid]

Hello, again
I found what is breaking the alignment: in my markup I have style="text-align: center" in the DIV enclosing the grid. This can be the actual DIV of the grid or another higher-level DIV enclosing the grid. I made a change in the example provided by you and the alignment is broken. Please see: http://jsfiddle.net/LAgZx/203/.

This maybe not such a big issue. On the other hand, it may be required to have the grid inside another DIV which needs the center alignment.

[paramvir]

Thanks for your post.

I found the solution to this issue is to keep text-align:left; for the grid. Then the grid can be safely enclosed in text-align:center div / container.

http://jsfiddle.net/LAgZx/207/

[genk_pqgrid]

Great, thanks for your help!
Really appreciate your quick turnaround 

Thanks,
Gene