Take the 2-minute tour ×

I have a fancybox http://fancybox.net which contains a form.

On the form I am running the jQuery validation plugin: http://docs.jquery.com/Plugins/Validation/Validator

Error messages are positioned directly under the inputs using position:absolute and a top margin.

var validator = $("#contact-us").validate({
        messages: {
            name: "Please enter your name",
            phone: "Please enter your phone number",
            email: "Please enter a valid e-mail address"

// Launch lightbox

    'speedIn'           :   500,
    'speedOut'          :   300,
    'overlayOpacity'    :   0.9,
    'overlayColor'      :   '#000',
    onComplete          :   function() {$('#cta-name').focus();},
    onCleanup           :   function() {validator.resetForm();}


label.error {
    background-color: #ae4136;
    color: #FFFFFF;
    font-size: 10px;
    margin-top: 30px;
    padding: 1px 5px 2px 5px;
    position: absolute;
    right: 21px;

It's all working great, except for when I generate the error messages the second time I launch the popup (ie: after having reset the form). The messages show 30px lower:

The first time I launch the fancybox The second time I launch the fancybox (ie: after having cleared the plugin

Any ideas as to Why the position is being recalculated? I am using FF14, but the same issue appears on chrome. Any help appreciated!

share|improve this question

1 Answer 1

up vote 0 down vote accepted

You haven't posted your HTML markup but absolute positioning is with respect its nearest parent element that has position: <anything other than static, eg. relative or absolute> applied to it.

You could do two things:

  1. Don't use positioning and just use block elements and margin
  2. Wrap each label and field in its own containing element, like a div or a fieldset
share|improve this answer
Thanks Moin. I've done some more digging, it seems its related to the element defaulting to display:inline - simple fix - change to display:block and remove margin. –  Nicole Harris Aug 13 '12 at 4:13

Your Answer


