Fancybox, Jquery Valider & position: absolue

Question

J'ai une fancybox http://fancybox.net qui contient un formulaire.

Sur la forme, je suis en cours d'exécution du plugin de validation jQuery: http://docs.jquery.com/Plugins/Validation/Validator

Les messages d'erreur sont positionnés directement sous les entrées à l'aide de la position: absolute et une marge supérieure.

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 

$(".launch-form").fancybox({ 
    '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; 
    line-height:1.2; 
    height:12px; 
} 

Il est tout fonctionne très bien, sauf quand je produis les messages d'erreur la deuxième fois que je lance le menu contextuel (ex: après avoir remis le formulaire). Les messages montrent 30px inférieur:

Toutes les idées Pourquoi la position est recalculé? J'utilise FF14, mais le même problème apparaît sur le chrome. Toute aide appréciée!

Answer 1

Vous n'avez pas publié votre balisage HTML mais le positionnement absolute s'applique à l'élément parent le plus proche auquel s'applique position: <anything other than static, eg. relative or absolute>.

Vous pouvez faire deux choses:

1. Ne pas utiliser le positionnement et il suffit d'utiliser block éléments et margin
2. Envelopper chaque étiquette et sur le terrain dans son élément contenant propre, comme un div ou a fieldset