CSS Styling for ASP.NET Applications

I just concluded a month long, onsite project for a mid-to-large sized company. The project was to consolidate several client-side applications into one web-based application for corporate & field employees. It was personally rewarding on several levels (besides financial). First, got to work with a company that has a seemingly great culture of teamwork and respect, of which I truly appreciate. I also had the opportunity to do some things graphically that I had not focused on before. Now don’t picture anything life changing here, just plenty of expanding rounded corner boxes, a logo, and an animated graphic (.gif) designed in Illustrator that involved 2-3D images. The final task was to create styles that would be implemented on an ASP.NET-based application leveraging ASP components & extensions. The latter proved to be an unexpectedly difficult challenge.

Designing the Interface

My involvement started with designing the interface. Coming from a corporate background, and working in an IT environment, I expected a set of explicit requirements and specifications on which to design. What I received was a PowerPoint. Yes, a Microsoft Office PowerPoint file, with slides communicating the expectations. There was plenty of detail, just not what I expected. There was also a lot of vagueness (like the dimensions of the screen, whether it was fixed or fluid, etc.). And throughout the project, the PowerPoint would change, and we would change our design with it.

I designed mockups, with inferred HTML markup and the styles that would provide the look & feel. I also created a workable color scheme, guided from the PowerPoint file. Everything looked decent on my screen, on my computer. Now, it was time to actually implement the style onto the developing application itself.

Styling the ASP.NET Application

And that’s when logic went out the door.

I quickly learned that ASP.NET components typically don’t use lightweight, semantic markup (why would I think that with a Microsoft-based platform). Mind you, since these components are all about functionality, the levels of divs, classes, etc. were totally necessary. However, for a web standards-based, semantic evangelist like myself, it was Freddie’s Nightmare all over again.

<td valign="top" width="100%">
  <div id="DivCustomerInformation" class="SlidingPanels" tabindex="0">
     <div class="SlidingPanelsContentGroup">
        <div id="DisplayCustomer" class="SlidingPanelsContent">
            <div id="divwrapper">
                <div id="divsub-main">
                    <div id="divsub-left">
                        <div id="divCustomerMain">
                            <table id="tblCustomerMain" width="100%" 
                                 style="height:auto" cellspacing="0" 
                                 cellpadding="0" 
                                 class="TableColorLightGreen">
                                <tr>
                                    <td width="25%">
                                        <Common:Label runat="server" 
                                             ID="lblBillHeader"
                                             ConfigUri="/Common.Resources
                                             /Resources/Customer/Bill.xml"
                                            CssClass="FieldFont2">
                                            </Common:Label>
                                        </td>
                                    </tr>
                                 </table>
                               </div>
                             </div>

In the example above, the code is laying out a set of form labels and related fields. Only the first form label is shown. There are 8 ids, 5 classes and 2 inline styles to navigate to style this section of the page. Some elements were easier to style than others. Much time was spent hunting for the proper hooks that would display the desired style. I cannot count the number of times an inline

  border:solid 1px red;

was used to figure things out.

Overall, the way styles were implemented came down to ease, effectiveness and time. We had a short amount of time to get the application ready prior to QA testing. I regret not being more stubborn in my call for separation of visual design and functionality, but with ASP.NET components, I’m not sure that is possible. There are styles in the external stylesheet, inline styles hooked to server components as well as post processed ids and classes. But it works, and at the end of the day, delivering on time, at or under budget is all that matters.

Or is it? </to be continued some day>