jquery errorPlacement label position for single

Question

using: jquery validator

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<div>
    <form id="everything">
        <label for="dd1">Select the best option</label>
        <br/>
        <select name="dd1" id="dd1" class="required">
            <option value="">None</option>
            <option value="o1">option 1</option>
            <option value="o2">option 2</option>
            <option value="o3">option 3</option>
        </select>
        <br/>
        <br/>
        <label for='agreement'>I accept the TOS</label>
        <input id="agreement" name="agreement" type="checkbox" style='float:left' />
        <br/>
        <input type="submit" />
</div>
</form>

I'm trying to figure out how to change the position of one of the error messages and leave the rest where they are. I know you can use ErrorPlacement to achieve this but I'm having a difficult time figuring out how to do it.

I've seen an example Custom Error Label Placement using jQuery validate (For all or some of your errors)

and created http://jsfiddle.net/Kn3v5/215/

I want to adjust 1. change the color of "Accept the TOS" to 2E0854. 2. move the error to 10px from the left.

what am I doing wrong?

thanks as always for the help much appreciated.

Answer 1

Simply remove/fix your top - bottom margins: http://jsfiddle.net/Kn3v5/219/

#everything label.error {
    color: #FB3A3A;
    display: inline-block;
    margin: 0px 10px 0px 60px; /* Top and Bottom to '0' */
    padding: 0;
    text-align: left;
    width: 320px;
}

#everything2 label.error {
    color: #2E0854;
    margin: 0px 10px 0px 10px; /* Top and Bottom to '0' */
}

Additionally you have an extra </div> inside your form