Pimpin' Validation Summary With CSS

Without any styling applied, ValidationSummary renders as a boring list with error messages. However, it’s easy to pretty it up with some CSS since it’s nothing more than a div with an unordered list inside.

I pretty much always put a validation summary in a master page and assign it a class:

<asp:ValidationSummary runat="server" 
    DisplayMode="BulletList" 
    CssClass="errors" />

Next, I’ll put it in a box with a red border an a humorous picture, plenty of which you can find for $1 at Stockxpert.

.errors {
 border: 2px solid red;
 color: red;
 margin: 5px 0px;
 padding: 15px;
 background: #fff url(../images/sad_server.gif) no-repeat 5px 50%;
}

The background image will appear 5px from the left edge of the summary and will always be centered vertically (it’s the “50%” part up there).

I will also knock out padding and margins on the error list and move it to the right far enough to sit next to the picture of a “sad server”:

.errors ul {
 margin: 0;
 padding: 0;
 margin-left: 80px;
 list-style: square;
}

The end result looks as follows:

There are many other ways to skin a validation summary. For example, if your pages have a fixed-width layout, you can shoot for a background image or two with rounder corners. The sky is the limit, as they say.