Question

Why is my CSS not working?

<!--Struts2 log-in-->
<form id="login" name="login" action="/springtest/login.action" method="POST">  

    <tr>

        <td>
            UserName:<input type="text" name="userName" maxlength="20" value="" id="login_userName"/>
        </td>

        <td class="errorMessage">
            Username must not be blanks. 
        </td>
    <br>
    </tr>

    <tr>

        <td>
            PassWord:<input type="password" name="password" maxlength="20" id="login_password"/>
        </td>

        <td class="errorMessage">
            Password must not be blanks. 
        <td>
            <br>
    </tr>
    <tr> 
        <td>
            <input type="submit" id="login_0" value="Login"/>

        </td>
    </tr>
</form>

My CSS is for the class errorMessage is this. Any clues how to debug this? I tried firedebug but well I am just new about it… I also check this site for answers maybe there is an overlapped? but how can you know it?

.errorMessage {
color: red;
font-size: 0.8em;
} 

Answer 1

If you make your HTML valid ( you have no <table> tags, one <td> is not closed, the <br /> appears where it shouldn’t etc. ) it will work – DEMO

<!--Struts2 log-in-->
<form id="login" name="login" action="/springtest/login.action" method="POST">  
    <table>
    <tr>
        <td>
            UserName: <input type="text" name="userName" maxlength="20" value="" id="login_userName "/>
        </td>
        <td class="errorMessage">
            Username must not be blanks. 
        </td>
    </tr>

    <tr>
        <td>
            PassWord: <input type="password" name="password" maxlength="20" id="login_password"/>
        </td>
        <td class="errorMessage">
            Password must not be blanks.
        </td>
    </tr>
    <tr> 
        <td colspan="2">
            <input type="submit" id="login_0" value="Login"/>
        </td>
    </tr>
    </table>
</form>