Jquery scrollTo problèmes dans IE7

Question

J'ai une page qui utilise le plugin scrollTo de jQuery pour gérer certaines fonctionnalités. Lorsque vous souhaitez réinitialiser votre mot de passe à partir de la page de connexion, il défile vers un nouveau formulaire plutôt que de rediriger l'utilisateur vers une nouvelle page. Tout fonctionne bien partout sauf IE7, bien sûr. Voici mon HTML:

<div id="blocksWrapper"> 
    <div id="blocks"> 
     <div id="form" class="block"> 
      <form id="formLogin" action="../index.html" method="post"> 
       <fieldset> 
        <legend>Registered Members Log-in Here</legend> 
        <label for="formLoginEmail">Email Address</label> 
        <input type="text" id="formLoginEmail" name="formLoginEmail" value="Email Address" /> 
        <label for="formLoginPassword">Password</label> 
        <input type="password" id="formLoginPassword" name="formLoginPassword" value="Password" /> 
        <input type="image" src="../images/login/buttonLogin.png" value="Login" id="formLoginSubmit" name="formLoginSubmit" /> 
       </fieldset> 
      </form> 
      <h3 id="register"><a href="#">Register</a></h3> 
      <h3 id="forgot"><a href="#">Forgot Password?</a></h3> 
     </div><!--end form--> 
     <div id="password" class="block"> 
      <form id="formPassword" action="../index.html" method="post"> 
       <fieldset> 
        <legend>Forgot your password?</legend> 
        <h3>Enter your Email Address to reset your password</h3> 
        <p>By selecting &lsquo;Reset Password&rsquo; you certify that the email address contained in this field is your email address.</p> 
        <label for="formPasswordEmail">Email Address</label> 
        <input type="text" id="formPasswordEmail" name="formPasswordEmail" value="Email Address" /> 
        <input type="image" src="../images/login/buttonResetPassword.png" value="Reset Password" id="formPasswordSubmit" name="formLoginSubmit" /> 
       </fieldset> 
      </form>         
     </div><!--end password--> 
     <div id="confirm" class="block"> 
      <h2>Confirmation Sent</h2> 
      <h3>Please check your email for instructions <br />on resetting your password.</h3> 
      <p>Your confirmation email will come from donotreply@mygrizzly.com. Be sure to add this to your spam filter so you will be able to receive this email.</p> 
      <h4><a href="#">Return to login screen</a></h4> 
     </div><!--end confirm--> 
    </div><!--end blocks--> 
</div> 

Mon CSS (tout ce qui devrait importer):

.login #content #blocksWrapper { 
    background: url(../images/login/bgBlock.png); 
    height: 127px; 
    margin: 0 0 50px 9px; 
    overflow: hidden; 
    padding: 20px 18px; 
    width: 437px; 
} 

.login #content #blocks { 
    height: 127px; 
    overflow: hidden; 
    width: 1377px; 
} 

.login #content .block { 
    float: left; 
    height: 127px; 
    margin-right: 18px; 
    position: relative; 
    width: 441px; 
} 

Et mon jQuery:

$('#forgot a').click(function() { 
    $('#blocksWrapper').scrollTo({left: 459, top: 0}, 400); 
    return false; 
}); 

$('#formPasswordSubmit').click(function() { 
    $('#blocksWrapper').scrollTo({left: 918, top: 0}, 400); 
    return false; 
}); 

$('#confirm h4 a').click(function() { 
    $('#blocksWrapper').scrollTo({left: 0, top: 0}, 200); 
    return false; 
}); 

Les extraits de code en direct sur cette page: [expurgée lorsqu'il est fixé ] Comme vous pouvez le voir, cela fonctionne très bien dans tous les navigateurs autres que IE7. Dans IE7, il fait défiler l'arrière-plan de la div #blocksWrapper plutôt que le contenu de la div #blocks. IE7 ne cache pas non plus le débordement pour une raison quelconque. Quelqu'un a des idées?

J'ai essayé de tester en utilisant #blocks comme sélecteur jQuery, et ce n'est pas le problème.

Merci une tonne, Marcus

Answer 1

j'ai pu résoudre ce problème en ajoutant la position: par rapport à l'élément d'emballage.

.login #content #blocksWrapper { 
    background: url(../images/login/bgBlock.png); 
    height: 127px; 
    margin: 0 0 50px 9px; 
    overflow: hidden; 
    padding: 20px 18px; 
    position: relative; 
    width: 437px; 
}