CSS Adapters for Membership Controls (working versions)

On September 6, the guys at Microsoft released the second beta version of their CSS Friendly ASP.Net 2.0 Control Adapters. In addition to bug fixes were CSS implementations of the membership controls – specifically, the Login, CreateUserWizard, PasswordRecovery, LoginStatus, and ChangePassword controls.

Unfortunately for the membership controls, it didn’t really work. This bothered me, because I’ve been using a hacked version of these controls that strips out TABLE-related tags for some time. The hacks work, but they’re hacks, and they have some quirky behavior.

I wrote a post on the ASP.Net forums, in which I described the problem.

I was glad to see that membership controls were added to the latest beta release. However, I did notice that all of them (with one exception) still put a TABLE wrapper around the content when using a templated control. It happens on the Login and PasswordRecovery controls…

Ironically, the CreateUserWizard did not add a table wrapper around the CreateUserWizardStep — but it did add it around the CompleteWizardStep.

Russ Helfand (obviously one of the guys working on the CSS adapters) responded and gave some tips. After some trial and error, we figured out some implementation updates that fix the problem for the Login, CreateUserWizard, and PasswordRecovery controls — an approach that can likely be used to fix other “broken” CSS adapters, too. A snippet of the solution follows.

Russ Helfand suggested:

Let’s look at the LoginAdapter as an example, http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fCSSAdapters%2fMembership%2fLogin.aspx. In particular, I want you to look at line 125 where the template container is being rendered. I’m considering changing that from:

container.RenderControl(writer);

To:

foreach (Control c in container.Controls)
{
c.RenderControl(writer);
}

It would be helpful if you could try that fix out locally and let me know if it works well for you.

I tried it, and it worked!

I used a similar approach for other controls. Take the CreateUserWizard adapter as an example. Since this adapter only added the table in the Completed step, I made the following change in the RenderContents() method (around line 181):

        activeStep.RenderControl(writer);

… changes to:

        if (activeStep.StepType == WizardStepType.Complete)
            foreach (Control c in activeStep.Controls[0].Controls[0].Controls[0].Controls[0].Controls)
            {
                c.RenderControl(writer);
            }
            else
                activeStep.RenderControl(writer);

For the PasswordRecovery adapter, there’s three places to change — each instance of the RenderControl() method in the RenderContents() method should be commented out and replaced by the foreach loop.

    //passwordRecovery.UserNameTemplateContainer.RenderControl(writer);
    foreach (Control c in passwordRecovery.UserNameTemplateContainer.Controls)
        c.RenderControl(writer);

    ...

    //passwordRecovery.QuestionTemplateContainer.RenderControl(writer);
    foreach (Control c in passwordRecovery.QuestionTemplateContainer.Controls)
        c.RenderControl(writer);

    ...

    //passwordRecovery.SuccessTemplateContainer.RenderControl(writer);
    foreach (Control c in passwordRecovery.SuccessTemplateContainer.Controls)
        c.RenderControl(writer);

That’s some weird behavior, but it works, and it doesn’t seem to break any of the functionality. Be sure to check out the complete thread on the ASP.Net forums for details.

A wonderfully simple, wonderfully useful IE CSS hack

For the past few years, I’ve been doing a lot of web development. Part of my design mantra (at least from a code perspective) is table-less design using CSS that works in as many browsers as humanly possible.

Since Firefox‘s support for CSS standards is superior to that of IE, I generally code everything so it looks good in Firefox, then apply hacks to get it to work in IE. (Most other browsers require minimal tweaking once something works well in Firefox and IE.) At times, the hack is to add some IE-specific CSS code, which is usually done using the asterisk hack:

.myClass {
 background-color:white;
}
* html body .myclass {
 background-color:black;
}

Only IE recognizes the second line, so in IE, the background color of any element with the myClass class will be black; for all other browsers, it will be white.

However, this hack can be replaced by one I found today, which is beautifully simple and elegant: add an underscore before the CSS property name.

body {
 background: green; /* show to Mozilla/Safari/Opera */
 _background: red; /* show to IE */
}

It works in IE Windows only, according to the guy who wrote about it on his blog, Joen Asmussen. Hats off to you, Joen — a great solution not only in its simplicity (one extra character) and in its readability (you can visualize the IE-only hack in the same content as your non-IE CSS).

For more on CSS hacking with IE, check out Essentials of CSS Hacking For Internet Explorer by Marko Dugonjic. For more info on CSS standards support in modern browsers, check out Web Browser Standards Support by David Hammond.