How Data Grid rendered in FireFox

It is very surprising that how Data Grid is rendered in FireFox. Black lines for rows and columns are drawn which is not the case with IE. It is like a table which is having border color set to black. If any style or themes is applied then also it is of no use. If you try to see the source of the page you will not find anything which is causing this problem.

I have also encountered the same problem when my QA engineer reported me that some black lines are appearing when I try to open page X in FireFox. I tried to find am I doing anything wrong with the CSS file or with my Skin file but that was not the problem.

After some googling, I found the solution but not the cause. The solution is set style property of Data Grid to “border-collapse: separate”. When I applied the same style to my page, no black color lines were appearing on the page with FireFox.

I am still wondering about the cause and how this particular style solves my problem.
Well, this world is full of strange things.

Happy Programming…
Enjoy…