MVC Validation input-validation-error CSS not working

Question

morning

i can't get the input-validation-error css to work when i have a class already for the input box.

<%=Html.TextBox("FirstName", null, new { @Class = "text" })%>
<%=Html.ValidationMessage("FirstName", new { @style = "color: red;", @Class = "errorInValid" })%>

if i take out new { @Class = "text" } then

.input-validation-error
{
    border: 1px solid #ff0000 !important;
    background-color: red !important;     
}

The above CSS works.

Help

regards, pete

thanks in advance (i am crap at CSS)

Answer 1

Not really an answer but try checking the order of how classes get applied in the css.

input-validation-error usually renders before any other classes like

<input type="text" class="input-validation-error text-box single-line">

try putting it at the end in firebug and see if something changes - probably it get's overwritte by another rule.

Don't know how your .text class is defined - you could also try to define .input-validation-error as form .input-validation-error so it automatically gains higher importance.

This is definately a cascade problem.

Answer 2

Add both .input-validation-error and .input.input-validation-error classes.