Question

I have created test form here: http://www.sitecdn.net/clients/repcow/form_min.html

Code for checkboxes looks like:

<div class="optIn">
    <div id="line1">
            <div class="checkbox"><input type="checkbox" checked="checked" value="true" name="MailingListOptIn"></div>
            <div>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            </div>
    </div>
    <div id="line2">
            <div class="checkbox"><input type="checkbox" tabindex="6" title="This is required." class="required" value="true" name="TermsOfService"></div>
            <div class=""><strong>I agree to the <a rel="tos_popup" name="tos" href="terms_of_service.html">Terms of Service</a>.</strong></div>
    </div>
</div>

bottom checkbox is set as required and after somebody will fail to check it user will see error message, but after it checkbox become not active (I can’t click on it). No clue what I have done wrong. Possible something with CSS?

Thanks

Answer 1

The checkbox still active but the error label is over the checkbox. Just adjust the layout…

the error is here:

.optIn .error {
   /*
   left: 0;
   margin-left: -90px;
   margin-top: -12px;
   position: absolute;
   top: 16px;
   width: 200px;
   */
}

this code is messing everything. Remove or redo it! 😉

Tip! Never work with absolute positioning. Unless you really want it …