A little less farther back, in 2007, I tried convincing some people at Microsoft to let the community continue development of these adapters, and they agreed. The CSSFriendly CodePlex project was born, and a bunch of bugs and some new features were added.

A lot has changed since then, but the adapters still have use today for people stuck on .Net 2.0 (they’re in the top 200 most downloaded CodePlex projects, and their forums still see activity). To facilitate those who still use CSSFriendly, I’ve added the library package to NuGet.

How to use the CSSFriendly NuGet package

In four easy steps (three if you already have NuGet).

1. First, you need Visual Studio 2010 and NuGet. (If you’re new to NuGet, read the getting started documentation.)
2. Next, right-click the References folder and choose Add Library Package Reference.
3. In the Add Library Package Reference window, search for “cssfriendly.”
4. When you see the CSSFriendly package, click the Install button.

After it installs, the following is added to your project:

• The CSSFriendly library reference
• The CSSFriendlyAdapters.browser file in the App_Browsers folder

At that point, you’re ready to go!

The full source of the CSSFriendly library is still available at CodePlex: http://cssfriendly.codeplex.com. Downloads there include sample code and walkthroughs.

Enjoy, and let me know if you have any issues!

1. My empty data template does not consist of tabular data.
2. My stylesheet has a default style for tables — a style that I don’t want applied to my empty data template.

One solution is to use the CSS Friendly Adapters for ASP.Net, which potentially solves both prolems, but that will bring in potential breaking changes to my GridView controls. I don’t have time for that (yet).

The solution I came up with is to do two things:

1. Create a new CSS class that removes table formatting (borders, backgrounds, padding, margins, etc.). This class will be applied to the GridView only when it has no data.
2. Add a line of code in the OnPreRender() method for each web page or control that has a GridView, conditionally setting the CSS class of the GridView to the aforementioned class.

My CSS class looks like the following.

.empty, .empty td { border:0;background:none;margin:0;padding:0; }

The line of code in your OnPreRender() event follows.

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);

    if (myGridView.Rows.Count == 0)
        myGridView.CssClass = "empty";
}

Why the OnPreRender stage? By placing your code here, you ensure that all data loaded into your GridView is already bound, whether it be from code (myGridView.DataBind()), from data sources in markup (such as the ObjectDataSource), or from viewstate.

It isn’t pretty, and it doesn’t give you semantic markup, but it’s easy enough to implement and can solve the visual problem.

Getting this to work on your web site is a simple matter of applying some CSS styles. The trick is to give your normal inputs fields a 1px border and a 1px margin; then, when they have focus, give them a 2px border (with a different color if you so choose) and no margin. This will ensure the dimensions of the element don’t change when the border width changes.

The following CSS provides an example of styling text boxes (both text and password inputs, and multi-line text boxes) and select lists (single and multi-line) with an alternate outline when holding the input focus.

input[type=text], input[type=password], textarea, select {
border-top: solid 1px #8e8e8e;
border-right: solid 1px #d1d1d1;
border-left: solid 1px #d1d1d1;
border-bottom: solid 1px #e4e4e4;
margin: 1px;
padding: 2px;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
border-color: #4488cc;
border-style: solid;
border-width: 2px;
margin: 0;
}

Like many good web tricks, this’ll look great in Firefox but won’t do anything in Internet Explorer. That’s because IE (through version 7) doesn’t support attribute selectors (as in [type=text]) or the :focus selector. To get things to work in IE, we need to rely on a little more CSS and some JavaScript.

The first thing to do is update our CSS. We’ll create a new iefocus class that, when applied, will put the border around our fields. (Of course, you should just add this to the end of the above CSS declaration to save space, but I present it separately below so you can follow along.)

.iefocus {
border-color: #4488cc;
border-style: solid;
border-width: 2px;
margin: 0;
}

The next step is to figure out how to tell IE — and only IE — to apply the iefocus class to elements fields when they get focus, and to remove the iefocus class when they lose focus (“blur”).

To do that, we use JavaScript. The snippet below uses jQuery to apply the behavior we want.

<!--[if LTE IE 7]>
<script type="text/javascript">
	function ApplyIEFormStyles()
	{
		jQuery(':text,:password,textarea,select').focus(function() {
			jQuery(this).addClass('focus');
		}).blur(function() {
			jQuery(this).removeClass('focus');
		});
	}
	jQuery(document).ready(ApplyIEFormStyles);
</script>
< ![endif]-->

The conditional comments around the script block ensure the code only runs in Internet Explorer (through version 7).

The above code works great, but I found one weird caveat: If your page uses ASP.Net AJAX, and you have an UpdatePanel on the page, the behavior disappears after an asynchronous postback. There’s a fix for that, fortunately — we hook the same method (ApplyIEFormStyles) to a handler that is fired after each ASP.Net AJAX asynchronous event ends.

The final JavaScript follows.

<!--[if LTE IE 7]>
<script type="text/javascript">
	function ApplyIEFormStyles()
	{
		jQuery(':text,:password,textarea,select').focus(function() {
			jQuery(this).addClass('focus');
		}).blur(function() {
			jQuery(this).removeClass('focus');
		});
	}
	jQuery(document).ready(ApplyIEFormStyles);
	if (Sys != null)
	{
		Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ApplyIEFormStyles);
	}
</script>
< ![endif]-->

That should do it — resolving the rendering issues in IE, and giving your users a little more usability when working through your web forms.

That took me to another test: How many HTML elements you can name in five minutes? I took that test, too.

This in turn took me to the most important test: How many five year olds could you take in a fight?

Granted, that’s about 20 minutes wasted, but it sure is fun to know that a 37-year old with some martial arts experience can take on 23 five-year-olds. It was also depressing to put myself in the “36-55″ age bracket.

A unique idea? Not really, but it’s one of the first times I’ve seen it written up and packaged in one place.