ASP.NET MVC CSS

Question

Can anyone please tell me why this CSS code doesn't work?

.message { border:2px solid #AAAAAA; padding: 8px; }
.message-error { background-color: #EE99BB; border-color: Red; color: Gray; }
.message-info { background-color: #AAAA22; border-color: Yellow; }
.message-success { background-color: #AAAA22; border-color: Yellow; }

The output is this:

Language was not successfully registered.

All I can get is a font color (not used here) and a border around the message. No background or border-color is executed.

The CSS file is Site.css in /Content folder. It is called from the Site.Master master page view.

The HTML is the following:

<% if (ViewData["message"] != null) { %>
    <span class="message <%= ViewData["messageType"] %>">
        <%= ViewData["message"] %>
    </span>
    <%= Html.ValidationSummary() %>
<% } %>

The HTML above is in a Notifications.ascx file in Shared folder and is rendered from the Site.Master master page view or some other partial depending on wether the request was Ajax or not.

Can anyone please help?

Answer 1

It looks like you are missing the "-" in your class tag definition, so I am assuiming your output HTML would look like<span class="message error">... and not <span class="message-error">...

I think the broswer it matching the message thus getting your border and font-color, but without the dash, you are not getting your other custom styles.

Answer 2

None of the alternatives worked because I using error-message instead of message-error. You couldn't see that. Only me to miss something so obvious.

Thank you anyway guys!