I was recently working on doing some CSS refactoring on an older project in C# and was finding some odd happenings with some of my pages in various browsers.  The pages in question all contained .Net Datagrids, yet only some of them were having "issues."  After refactoring the CSS (so that all of the datagrids shared the same styling) I found a couple that seemed to have additional lines, resembling border lines, inside of the rows of the grid.  I found this odd, especially since the CSS had all borders for the datagrid turned off... or set to "none" if you want to get really technical.

So after banging my head into the desk for about an hour searching for the cause of this apparent "glitch," a friend of mine, Rick, told me that he had been having the same problem just a few days earlier and was able to find the culprit. Using the "built in" attributes with the .Net Datagrid Control, specifically the 'GridLines=' attribute, has some unexpected results when dealing with how it renders across browsers. The .Net Datagrid renders as a table and setting GridLines=<anything other than NONE> actually gets transformed into the HTML Table tag RULES=ALL.

RULES=ALL

RULES=ALL is a fairly esoteric HTML tag that indicates that all INTERNAL borders of a table should be visible. If you want to read more, check out http://www.htmlcodetutorial.com/tables/_TABLE_RULES_ALL.html or you can visit http://w3schools.com/html/html_tables.asp for more background on the HTML Table Control. Although you have CSS styling properties set on the grid, this attribute does not get overridden on some browsers with CSS.

In order to avoid these rendering inconsistencies, I found that setting GridLines=NONE on any .Net DataGrids or any other component that renders as a table. Controlling all of the borders inside of the CSS provides a centralized location for all of my grid layouts. Definetely beats digging through pages of markup trying to deduce the reason there are extra, mysterious lines on my pages.