Surrounding a ValidationSummary with a box via CSS

Question

By default Html.ValidationSummary() produces HTML like this:

<span class="validation-summary-errors">There were some errors...</span>
<ul class="validation-summary-errors">
   <li>First Name too long</li>
   <li>Invalid Email Address</li>
</ul>

I'd like to select the entire validation summary and add a bounding box around it via CSS, so I am adding a CSS class like this:

.validation-summary-errors{
background-color:#D9FFB2;
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
}

Now the problem is that this draws separate boxes around the validation summary message and each error message. Certainly not what I had in mind.

I can add a div around the summary like this, but this will result in an empty red box if there are no validation errors, so this is not the way:

  <div class="my-validation-summary">
        <h2>
            <%=Model.Message%>
        </h2>
        <%= Html.ValidationSummary("There were some errors...")%>
    </div>

I can think of several ways to solve this:

• Add a bounding div conditionally with server-side tags
• Add a bounding div via jQuery
• Write my own HtmlHelper wrapper that prints a CSS-friendly ValidationSummary

However, all of this looks quite awkward for solving such a simple task. There must be a better way to do this. Perhaps some other way of writing the CSS class so I don't get an empty box when there is no validation summary?

Edit: Just to clarify, I am calling the html helper like this:

<%=Html.ValidationSummary("There were some errors...") %>

Edit 2: The scope of this question was to see whether I have overlooked something dead-easy and obvious. It seems I haven't, so I'll simply add my own HtmlHelper function that fits my needs. I am voting to close my own question.

Solution

Here is some CSS that will work:

.validation-summary-errors {
    background-color: #D9FFB2;
    border:1px solid #5CBA30;
    width: 400px;
    }
span.validation-summary-errors {
    border-bottom-color: #D9FFB2;
    display:block;
    }
ul.validation-summary-errors {
    margin:0;
    padding:0;
    border-top:none;
    }

You may have to play around with the widths depending on your other css.

Edit after comment

I changed ul.validation-summary-errors to zero out the margin and padding and removed the width. It should work cross-browser now.

Comments

[Adrian Grigore]

As I said, I know it's quite easy to solve this problem with jQuery. But this seems like a quite awkward solution.

[Adrian Grigore]

Almost :-)! This works fine in Firefox 3, but breaks in IE 7. See content.screencast.com/users/sandra123/folders/Jing/media/…

[Adrian Grigore]

No, I want a single border that surrounds both the validation summary and the messages.

[Emily]

Did my new version of the code work? It should fix the list being pushed over in IE7.