Tag: css

CSS Friendly Control Adapters now available on NuGet

Posted on | by brian | 1 Comment on CSS Friendly Control Adapters now available on NuGet

Back in the days of Web Forms, there were server controls, and they generated rather CSS-unfriendly HTML. So, Microsoft got someone (Russ Helfand) to write adapters that changed their rendering to be more CSS-friendly: the “CSS Friendly Control Adapters” were born.

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

cssfriendly-nuget-packageIn 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!

Cleaning up the GridView’s EmptyDataTemplate (damn those tables!)

Posted on | by brian | 1 Comment on Cleaning up the GridView’s EmptyDataTemplate (damn those tables!)

A project I’ve been working on makes frequent use of the ASP.Net GridView. However, as many people know, the GridView has one glaring issue: It wraps your <EmptyDataTemplate> in an HTML table — something that I don’t want, for two reasons:

  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.

Outlining textbox input fields (and getting it to work in IE)

Posted on | by brian | 6 Comments on Outlining textbox input fields (and getting it to work in IE)

While using Google GMail today, I noticed that they put a blue highlighting around the text input boxes when they have input focus. It’s a nice touch that makes it just a bit easier for users to identify which field their typing in. (Safari users, of course, get this on all web sites out of the box.)

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.

Continue reading →

Naming CSS properties, HTML properties… and fighting five-year olds

Posted on | by brian | Leave a Comment on Naming CSS properties, HTML properties… and fighting five-year olds

It started innocently enough when I stumbled across a blog post over at PoshCSS, How many CSS Properties can you name in 7 minutes? Curious, I took the test.

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.

CSS styled forms

Posted on | by brian | Leave a Comment on CSS styled forms

I like using CSS for layouts and for making sites look pretty — partially because it’s a challenge that is quite satisfying when it works, and partially because I’m not a designer and don’t do well with more robust design elements.

One thing that I often liked using CSS for is for forms. For the past two or so years I’ve been tweaking my technique, and I think I finally have something that works well enough in most situations to share it with you.

Requirements

The sample page uses ___layouts for the basic page structure. ___layouts (a heck of a name, I tell ya) is derived from Yahoo’s UI library, but it’s easier to implement.

Compatibility

The following browsers have been tested against the sample page, which also provides instructions and the CSS. Note any compatibility issues.

Important Note: At very small screen widths (generally less than 600 pixels wide), things can get out of control. Firefox 2.0 handles this best, but in all cases, things get messy at very small screen widths. As a result, setting a min-width on your body tag (or using the appropriate hack to do the same in IE6) is recommended.

  • Firefox
    • Firefox 2.0.0.1: No issues.
    • Firefox 1.5.0.4: No issues.
    • Firefox 1.0: No issues.
  • Internet Explorer
    • Internet Explorer 7.0.5730.11: No issues.
    • Internet Explorer 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 (sorry, I couldn’t help myself): Background colors do not fill complete rows. To use background colors, you need to use a CSS hack (I may add this in the future). Incredibly, there are otherwise no issues.
  • Netscape
    • Netscape 8.1: Line around form doesn’t fully wrap with legend, causing a very minor stylistic quirk, but otherwise no issues.
    • Netscape 7.2: Slightly worse handling of fieldset border than Netscape 8.1, causing a minor stylistic quirk, but otherwise no issues.
    • Netscape 6.2: Totally broken. Most content in the form does not render. To resolve this, you need to set overflow:visible on the div.row. However, doing this breaks some scaling features (long text boxes will run outside the box) and breaks the row background color. Considering Netscape 6.2 was launch in November 2001, instead of hacking to support it, tell your visitors who are using it to upgrade.
  • Opera
    • Opera 9.10: No issues.
    • Opera 8.5.4: No issues.
    • Opera 7.11: Totally broken. See the Netscape 6.2 notes for a fix (and why you shouldn’t bother, since Opera 7.11 was released some time in 2003 and likely has a tiny user base).
    • Opera 6.2: Totally broken (though slightly differently than with Opera 7.11). All notes for Opera 7.11 apply here.

To view the CSS used, some brief instructions, and a form sample, go to http://www.sidesofmarch.com/wp-content/uploads/files/cssforms/cssforms.htm.

Styling your checkboxes and radio buttons

Posted on | by brian | Leave a Comment on Styling your checkboxes and radio buttons

A fantastic Web page called Styled Checkboxes describes how to use CSS and JavaScript to create graphical checkboxes and radio buttons that depreciate to the standard checkbox and radio button HTML controls when CSS or JavaScript is turned off. It works, too – and is definitely worth checking out as a way to pretty up your Web pages.

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