Wednesday, July 15, 2009

.NET and CSS

Each dynamic programming language platform compiles HTML code differently. In the world of .NET, often times unnecessary html gets compiled. Here are a few remedies.

Labels
Labels come wrapped with <span></span> when compiled. For accessibility and usability, the best practice is to use <label></label> tags. If you're a developer looking at CSS and usability, see this link on ASP.NET 2.0 Accessibility.

Tables and form elements
  • If you style <table></table> make sure to account for nested tables. You will get spacing in a nested table. The solution is to remove padding and margin from the parent <td>.
  • Test and style the <td> using style="margin:0;padding:0;". Once you're happy with the results remove the hard coding from your page and create a new class in the css document.
  • Radio button controls render the button set into a table, and wraps the label using <label></label> tags. This can throw off the layout. If you can't specify an ID for the control, use a class to isolate the radio button set control.
  • When using in line validation, <span> tag like this, style="display:none;" embed within the <span></span>.
Class and ID selectors
Make IDs unique. For example, if you use #main or #container for the main sections of your page, don't reuse the same ID in the .NET control. You'll throw an error. Come up with a naming convention that makes sense, but are also in line with your developers.

Til' next time. Happy coding!