ASP.NET 2.0 - Give me table border back!!

Someone asked me about why tables in his pages will have no border just after upgrading from .NET 1.1 to .NET 2.0 without any code changing.
It was easy (relatively) to find the root cause, but it took me some time to find a simplest solution for him.

Problem description
:
WebControls DataGrid & Table will render without border even it is set in gridline/border property in the code.

Analysis:
After comparing the output HTML of .NET 1.1 & .NET 2.0, both will have a HTML table with correct border settings in HTML attribute Style:
style="border-color:#000000; " 
But there is another HTML attribute named bordercolor set with right color as value in .NET 1.1:
bordercolor="#000000"
Therefore, the root cause is that there is no such attribute "bordercolor" in element “Table” according to HTML 4.01 speciation. Attribute “bordercolor” is one of the IE-ONLY attributes (from IE 3+), but IE6 does not recoginize CSS border-color. Thus, .NET 2.0 renders correct output HTML, but just IE6 displays it incorrectly. We may test this attribute in browsers other than IE (such as Amaya, a W3C developed browser) and would find that it does NOT always work (In later versions of Firefox, we might see 'bordercolor' attribute affecting border color correctly, but it is obvious a toleration for many invalid Web pages in the Internet owing to popularity of IE.). So it becomes just a compatibilty issue for IE6 (and its predecessors) in .NET 2.0. I think Mircrosoft takes the compatiblity (cross platforms and browsers) and standard consideration more seriously, as we can see in .NET 2.0 and IE7/IE8. MS will develop their products to follow standard (like W3C recommendations), or to make their specification into standard (eg. word-warp in CSS 3).

Solutions

  1. One way to "compatiable" with IE 6 is to added “bordercolor” into key-value sets of attributes manually.
  2. The ohter is to add a compatibility settings in “Web.config” for .NET Framework 2.0 (Note: this setting does NOT exist in .NET 1.1, i.e. it will rise compiler error in Web site).
 <xhtmlConformance mode="Legacy" />

留言

這個網誌中的熱門文章

Excel技巧(1):檔案肥大的原因,附上減肥撇步

Excel技巧(2):拜託殺了那些看不見的空白吧!