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.

Removing the TABLE from the CreateUserWizard control

About two months ago, I wrote a post about removing the TABLE from ASP.Net 2.0’s Login control. The below code will let you do the same from the CreateUserWizard control. One important caveat: for this to work (in my limited testing), you must provide a custom template for the ContentTemplate and CustomNavigationTemplate of the CreateUserWizardStep, and for the ContentTemplate of the CompleteWizardStep.

public class CssCreateUserWizard : System.Web.UI.WebControls.CreateUserWizard
{
    protected override void Render( HtmlTextWriter writer )
    {
        if ( CreateUserStep.ContentTemplate != null && this.ActiveStep == this.CreateUserStep )
        {
            WebControl creatediv = new WebControl( HtmlTextWriterTag.Div );
            creatediv.CssClass = this.CssClass;
            CreateUserStep.ContentTemplate.InstantiateIn( creatediv );
            CreateUserStep.ContentTemplateContainer.Controls.Clear();
            CreateUserStep.ContentTemplateContainer.Controls.Add( creatediv );
            creatediv.RenderControl( writer );

            if ( CreateUserStep.CustomNavigationTemplate != null )
            {
                WebControl navdiv = new WebControl(HtmlTextWriterTag.Div);
                navdiv.CssClass = this.CssClass;
                CreateUserStep.CustomNavigationTemplate.InstantiateIn(navdiv);
                CreateUserStep.CustomNavigationTemplateContainer.Controls.Clear();
                CreateUserStep.CustomNavigationTemplateContainer.Controls.Add(navdiv);
                navdiv.RenderControl(writer);
            }
        }

        if ( CompleteStep.ContentTemplate != null && this.ActiveStep == this.CompleteStep )
        {
            WebControl completediv = new WebControl( HtmlTextWriterTag.Div );
            completediv.CssClass = this.CssClass;
            CompleteStep.ContentTemplate.InstantiateIn( completediv );
            CompleteStep.ContentTemplateContainer.Controls.Clear();
            CompleteStep.ContentTemplateContainer.Controls.Add( completediv );
            completediv.RenderControl( writer );
        }
    }
}

Removing tables in Microsoft’s ASP.Net 2.0 Controls

Microsoft has been touting ASP.Net 2.0 as taking great strides towards XHTML compatibility and meeting common accessibility guidelines. However, some controls still add table tags around them, despite your best efforts to avoid using tables. The new Login control is one of those.

For me, the table wrapper around the Login control was causing rendering problems. I was using a pure CSS layout with no tables for the login form, and the presence of the table tag wrapped around the control was breaking my layout. A quick Google search (q=asp.net+2.0+login+control+table) found a blog post that outlined a solution.

The fix was simple: create a new class, inherit from the existing System.Web.UI.WebControls.Login class, and override the Render method. A few lines of code, and the table wrapper was replaced with a div wrapper. There was one catch: the version posted on the aforementioned blog didn’t include the CssClass attribute on the new control. One extra line of code fixed that.

Below is the code, all but one line thanks to Alex Gorbatchev of dreamprojections.com:

    public class CssLogin : System.Web.UI.WebControls.Login
    {
        protected override void Render( HtmlTextWriter writer )
        {
            WebControl div = new WebControl( HtmlTextWriterTag.Div );

            LayoutTemplate.InstantiateIn( div );

            Controls.Clear();
            Controls.Add( div );

            div.CopyBaseAttributes( this );
            div.CssClass = this.CssClass;
            div.RenderControl( writer );
        }
    }