Posted on May 20th, 2011%
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
In four easy steps (three if you already have NuGet).
First, you need Visual Studio 2010 and NuGet. (If you’re . . .
→ Read More: CSS Friendly Control Adapters now available on NuGet
Posted on November 12th, 2008%
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:
My empty data template does not consist of tabular data.
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:
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.
Add a line of code in the OnPreRender() method for each web page or control that . . .
→ Read More: Cleaning up the GridView’s EmptyDataTemplate (damn those tables!)
Posted on November 4th, 2008%
 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.
. . . → Read More: Outlining textbox input fields (and getting it to work in IE)
Posted on January 8th, 2008%
Posted on February 19th, 2007%
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, . . .
→ Read More: CSS styled forms
|
|
