Jquery scrollTo issues in IE7
I have a page that uses jQuery's scrollTo plugin to manage some functionality. When you want to reset your password from the login page, it scrolls to a new form rather than taking the user to a new page. It all works fine everywhere but IE7, of course. Here's my 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 ‘Reset Password’ 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">
&l开发者_如何学JAVAt;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>
My CSS (all that should matter):
.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;
}
And my 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;
});
The code excerpts live on this page: [redacted when fixed]
As you can see, it works fine in all browsers other than IE7. In IE7, it's scrolling the background of the #blocksWrapper div rather than the contents of the #blocks div. IE7 is also not hiding the overflow for some reason. Anyone have any ideas?
I've tried testing using #blocks as my jQuery selector, and that isn't the issue.
Thanks a ton, Marcus
I was able to resolve this by adding position:relative to the wrapper element.
.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;
}
精彩评论