I’ve been working on some old .NET code which previously worked with Internet Explorer only. I’m currently updating it so that it works with most major browsers rather than limiting it to the one.

By and large it’s fairly easy to do, a bit time consuming and fiddly at times as it’s mainly JavaScript tweaks and converting DOM selectors and the like, but this afternoon I came up against something that had me baffled for about an hour.

There is a DataGrid that contains a table of tabular data. The CSS styling for this table is to have no borders. This all works fine in Internet Explorer. But Firefox displays borders, and not even proper borders, half borders. Using Firebug, I could see that some styling had been directly assigned to the table element. I couldn’t for the life of me figure out where this was coming from as it wasn’t being assigned in the CSS, HTML, JavaScript nor code behind. Then it dawned on me that perhaps .NET was assigning it itself. And sure enough, apparently it is.

Taking the information from the post linked above, I added myDataGrid.ControlStyle.Reset(); to the DataGrid, and then assigned the required CSS class to it with myDataGrid.CssClass = "myDataGridCss"; and this solved the problem.

A bit infuriating to say the least, but since I found a solution to it I thought I’d make a quick blog post about it in the hope that it saves someone else some hassle!