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!

Friday, July 3, 2009

Gmail's Drag and drop with labels galore

Google is at it again, this time providing drag and drop functionality for Gmail. If you're anything like me, you like clean inboxes with appropriate labels and quick sorting.

With Gmail's new drag and drop features, you'll be able to:
  • Drag and drop messages directly into labels
  • New location labels
  • Control which labels to show or hide
Read more here on Gmail's official blog.