I was trying to make a slide down login menu with CSS & Jquery everything was going very nice until i tested it in IE6 and Opera latest version a weird bug appeared when i click on client login and the form appears there is a big white gap between the form and the client login anchor tag and i don`t know what is it and how can i fix it ? also i need to know what causes it too , i tried using a reset and not using one the same is still there too (eric meyer`s reset). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="en" /> <style type="text/css"> #login{ width:250px; position:absolute; top:0; left:800px; z-index:9; overflow:hidden; text-transform:capitalize; font-size:12px; font-family:arial,sans-serif; } #client_login{ padding:5px 0 10px 20px; display:block; width:80px; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; font-size:11px; font-weight:bold; text-decoration:none; } .open{ background:url(../images/arrow_down.gif) #59afe2 no-repeat 7% 40%; } .close{ background:url(../images/arrow_up.gif) #59afe2 no-repeat 7% 40%; } #login_form{ padding:15px; display:none; background:#59afe2; -moz-border-radius:10px; -webkit-border-radius:10px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; } #login_form fieldset{ border:2px solid #93C1DB; } #login_form fieldset a { margin-top:5px; display:block; } label,button{ display:block; margin-top:10px; } button{ margin-bottom:10px; } label span { margin-bottom:5px; display:block; } label{ font-weight:bold; } </style> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#client_login").click(function() { $(this).toggleClass("close"); $("form#login_form").slideToggle(300); }); $("form#login_form").mouseup(function() { return false }); }); </script> </head> <body id="homepage"> <div id="container"> <div id="login"> <form method="post" action="#" id="login_form"> <fieldset> <legend>welcome back</legend> <label for="user"><span>username :</span><input id="user" name="user" title="Username" tabindex="1" type="text"/></label> <label for="pass"><span>password :</span><input id="pass" name="pass" value="" title="Password" tabindex="2" type="password"/></label> <button name="submit" type="submit" value="login" tabindex="3">log in</button> <label class="remember" for="remember"><input class="remember" name="remember" value="Remember me" title="Remember me" tabindex="4" type="checkbox">remember me</label> <a href="#" title="Forget Password">forget your password ?</a> </fieldset> </form> <a href="#" title="Client Login" class="open" id="client_login">client login</a> </div> <!-- END CLIENT LOGIN --> </div> <!-- END CONTAINER --> </body> </html> Code (markup):
You didn't set a margin value for your #login_form, so it used a default margin value, which is not 0 in IE 6 and 7. Add style margin: 0; to it.