Any idea how to hide all the borders in Firefox when using DataGrid to show the data table in ASP.Net? Setting up the DataGrid property borderwidth = "none" only works in IE. It shows solid line in whatever default color in Firefox. I used to just make the border lighter or nicer so it won't look too ugly but the real trick is, to set the property gridlines = "none". Everything works perfectly as the way it should be in both browsers now.
So why doesn't borderwidth work? We all know that the DataGrid control will be rendered in <table> eventually when being called up in the client browser. It puts a property rules = "all" in <table> by default in the client page unless you say no to the engine by setting gridlines = "none" in DataGrid. So what does this rules do? According to W3C.org,
rules = none|groups|rows|cols|all [CI]
This attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values:
* none: No rules. This is the default value.
* groups: Rules will appear between row groups (see THEAD, TFOOT, and TBODY) and column groups (see COLGROUP and COL) only.
* rows: Rules will appear between rows only.
* cols: Rules will appear between columns only.
* all: Rules will appear between all rows and columns.
Aha, it explains why. Apparently, rules will not be used when combining with border style but it rules all in FireFox. Which one is more CSS-complaint then? Sorry, I didn't check.
ASP.Net 2.0 CSS Friendly Control Adapters might works better in server controls like DataGrid because it does help to create CSS friendly website that doesn't have any <table> in any rendered page in any client browser. However, I am not that keen to use it so far as it also seems to effects quite a lot existing styles in my web projects.