SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird bug ie6,7 & Opera 10 beta

    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).



    Code:
    <!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>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    By setting margin-bottom:0; on your form you can remove the defaults in IE and Opera.

    Code:
     #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;
         margin-bottom:0;
     }
    i tried using a reset and not using one the same is still there too (eric meyer`s reset)
    I suspect the meyer reset did not work because you have given your form an ID. It worked with the universal reset.
    * {margin:0;padding:0;}

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks , actually the meyer reset works but when i was cleaning it and deleteing some of the element i won`t use it in my project i deleted the "m" from form accidentally .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •