CSS Help

[whimsical1987]

Hello,

I am developing a twitter based login in my website. I have trouble in the dropdown. When I click the sign in button I can see only half of the drop down. I had checked the CSS and the z-index is very high. Despite that I am unable to see the complete drop down.
Attached is the image of the file and I have my CSS and the HTML in which the div tags are ordered.

body {
	margin:0;
	padding:0;
	font:13px/16px "Lucida Grande", Arial, Sans-serif;
}

#container {
	background: #ffff;
	margin: 0 auto;
	width: 1000px;
}

#header {
	background: #ccc;
	padding: 20px;
	position:relative;
	overflow:hidden;
	clear:both;
	z-index:0;
}

#logo {
	position: relative;
	float:left;
	width:300px;
	height:70px;
	margin-top:0px;
	background-image: url(images/logo.png);	
}

#menubar {
	position:relative;
	width:1000px;
	background-color:#666;
	z-index: 2000;
	background-image: url(images/menubar.png);
	overflow: auto;
	height: 40px;
	margin-top: 2px;
}
#registerForm fieldset {
	border: 2px solid #69C;
	float: left;
	margin: 0.7em 0;
	padding: 0 2% 1.75em 18%;
	width: 80%;
	position:relative;
	background-attachment: scroll;
	background-color: #FFF;
	background-image: none;
	background-repeat: repeat;
	background-position: 0 0;
	margin-left:auto;
	margin-right:auto;
}
#registerForm {
	width:90%;
	margin-right:auto;
	margin-left:auto;
}

#tableinfo {
	float:left;
	position:relative;
	padding-top: 10px;
}
#registerForm legend {
	color: #999;
	font-size: 1em;
	left: 1em;
	line-height: 1.3em;
	margin: 0;
	padding-top: 1.25em;
	position: absolute;
	width: 16%;
}
#registerForm legend {
	font-weight:bold;
}

#registerForm .required {
	color:red;
	font-size: xx-small;
	text-transform:uppercase;
}


a:link, a:visited {
	color:#27b;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a img {
	border-width:0;
}
#topnav {
	font-size:11px;
	line-height:0px;
	text-align:right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 5px;
	float:right;
	width:300px;
}
#topnav a.signin, a.register {
	background:#88bbd4;
	padding:4px 6px 6px;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	z-index:1000;
}
#topnav a.signin:hover, a.register:hover {
	background:#59B;
	*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	font-size: 11px;
}
#topnav a.signin, #topnav a.signin:hover {
	*background-position:0 3px!important;
}

a.signin {
	position:relative;
	margin-left:3px;
}
a.signin span {
	background-image:url("images/toggle_down_light.png");
	background-repeat:no-repeat;
	background-position:100% 50%;
	padding:4px 16px 6px 0;
}
#topnav a.menu-open {
	background:#ddeef6!important;
	color:#666!important;
	outline:none;

}
#small_signup {
	display:inline;
	float:none;
	line-height:23px;
	margin:25px 0 0;
	width:170px;
}
a.signin.menu-open span {
	background-image:url("images/toggle_up_dark.png");
	color:#789;
}

#signin_menu {
	-moz-border-radius-topleft:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	display:none;
	background-color:#ddeef6;
	position:absolute;
	width:210px;
	z-index:2000;
	border:1px transparent;
	text-align:left;
	padding:12px;
	top: 24.5px; 
	right: 0px; 
	margin-top:5px;
	margin-right: 0px;
	*margin-right: -1px;
	color:#789;
	font-size:11px;
	overflow:auto;
	
}

#signin_menu input[type=text], #signin_menu input[type=password] {
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ACE;
	font-size:13px;
	margin:0 0 5px;
	padding:5px;
	width:203px;
}
#signin_menu p {
	margin:0;
}
#signin_menu a {
	color:#6AC;
}
#signin_menu label {
	font-weight:normal;
}
#signin_menu p.remember {
	padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
	clear:both;
	margin:5px 0;
}
#signin_menu p a {
	color:#27B!important;
}
#signin_submit {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
	border:1px solid #39D;
	color:#fff;
	text-shadow:0 -1px 0 #39d;
	padding:4px 10px 5px;
	font-size:11px;
	margin:0 5px 0 0;
	font-weight:bold;
	z-index:100;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
	background-position:0 -5px;
	cursor:pointer;
}

.tipsy-inner {
	padding:10px 15px;
	line-height:1.5em;
	font-weight:bold;
}
.tipsy {
	opacity:.8;
	filter:alpha(opacity=80);
	background-repeat:no-repeat;
	padding:5px;
}
.tipsy-inner {
	padding:8px 8px;
	max-width:200px;
	font:11px 'Lucida Grande', sans-serif;
	font-weight:bold;
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#000;
	color:white;
	text-align:left;
}
.tipsy-north {
	background-image:url(images/tipsy-north.gif);
	background-position:top center;
}
.tipsy-south {
	background-image:url(images/tipsy-south.gif);
	background-position:bottom center;
}
.tipsy-east {
	background-image:url(images/tipsy-east.gif);
	background-position:right center;
}
.tipsy-west {
	background-image:url(images/tipsy-west.gif);
	background-position:left center;
}

This is the HTML div tags layout

<body>
<div id="container" >
<div id = "header">
    
    	<div id = "logo">
        	
        </div>    
	  <div id="topnav"> <a href="registration.php" class="register"> <span> Register </span></a>
       	  <a href="login" class="signin"><span>Sign in</span></a> 
      </div>        
         <fieldset id="signin_menu">
          <form method="POST" id="signin" action="login.php">
		      <label for="username">Username or email</label>
		      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
   			   <p>
		        <label for="password">Password</label>
        		<input id="password" name="password" value="" title="password" tabindex="5" type="password">
		      </p>
      		  <p class="remember">
		        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
        		<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
		        <label for="remember">Remember me</label>
      		  </p>
		      <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
		      <p class="forgot-username"> <A id=forgot_username_link 
				title="If you remember your password, try logging in with your email" 
				href="#">Forgot your username?</A> 
              </p>
    		</form>
  		  </fieldset>
	</div>
    
    <div id="menubar">
    
    </div>
</div>
</body>

I also have a question of copyrights. Can I use this twitter kind of login in my website and publish my website.

[floatingDivs]

Do you have a live test site up yet? The HTML you posted is not of much use considering the images can't be seen (empty "login" area).

From what I'm seeing in the image you posted, it appears to be a floating issue but I can't be 100% certain without seeing the live page.

Regarding your question about copyrights, I don't see why not. At least, as long as you didn't copy the Twitter login entirely.

[whimsical1987]

I am sorry. I forgot to post the images. I am attaching the images.

[floatingDivs]

Hey whimsical1987,

I took a look at your code. There are two ways to go about doing this. The first would be to set a larger height on the #header when the login form is turned on. That may not be a smart idea, considering a header should not be that big.

The other idea would be to move the <fieldset> and all its data (so your entire form) out of the header and into its own <div>.

EDIT BELOW: Take a look at how I've placed the fieldset in its own "area" rather than being inside the header div. Also, any CSS changes I've made have been inline-styled, so your CSS entries haven't been touched. All changes, by the way, are in the <fieldset> container.

--EDIT--

<html>
<head>
<style>
body {
	margin:0;
	padding:0;
	font:13px/16px "Lucida Grande", Arial, Sans-serif;
}

#container {
	background: #ffff;
	margin: 0 auto;
	width: 1000px;
}

#header {
	background: #ccc;
	padding: 20px;
	position:relative;
	overflow:hidden;
	clear:both;
	z-index:0;
}

#logo {
	position: relative;
	float:left;
	width:300px;
	height:70px;
	margin-top:0px;
	background-image: url(images/logo.png);	
}

#menubar {
	position:relative;
	width:1000px;
	background-color:#666;
	z-index: 2000;
	background-image: url(images/menubar.png);
	overflow: auto;
	height: 40px;
	margin-top: 2px;
}
#registerForm fieldset {
	border: 2px solid #69C;
	float: left;
	margin: 0.7em 0;
	padding: 0 2% 1.75em 18%;
	width: 80%;
	position:relative;
	background-attachment: scroll;
	background-color: #FFF;
	background-image: none;
	background-repeat: repeat;
	background-position: 0 0;
	margin-left:auto;
	margin-right:auto;
}
#registerForm {
	width:90%;
	margin-right:auto;
	margin-left:auto;
}

#tableinfo {
	float:left;
	position:relative;
	padding-top: 10px;
}
#registerForm legend {
	color: #999;
	font-size: 1em;
	left: 1em;
	line-height: 1.3em;
	margin: 0;
	padding-top: 1.25em;
	position: absolute;
	width: 16%;
}
#registerForm legend {
	font-weight:bold;
}

#registerForm .required {
	color:red;
	font-size: xx-small;
	text-transform:uppercase;
}


a:link, a:visited {
	color:#27b;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a img {
	border-width:0;
}
#topnav {
	font-size:11px;
	line-height:0px;
	text-align:right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 5px;
	float:right;
	width:300px;
}
#topnav a.signin, a.register {
	background:#88bbd4;
	padding:4px 6px 6px;
	text-decoration:none;
	font-weight:bold;
	color:#fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	*background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	z-index:1000;
}
#topnav a.signin:hover, a.register:hover {
	background:#59B;
	*background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
	*padding:4px 12px 6px;
	font-size: 11px;
}
#topnav a.signin, #topnav a.signin:hover {
	*background-position:0 3px!important;
}

a.signin {
	position:relative;
	margin-left:3px;
}
a.signin span {
	background-image:url("images/toggle_down_light.png");
	background-repeat:no-repeat;
	background-position:100% 50%;
	padding:4px 16px 6px 0;
}
#topnav a.menu-open {
	background:#ddeef6!important;
	color:#666!important;
	outline:none;

}
#small_signup {
	display:inline;
	float:none;
	line-height:23px;
	margin:25px 0 0;
	width:170px;
}
a.signin.menu-open span {
	background-image:url("images/toggle_up_dark.png");
	color:#789;
}

#signin_menu {
	-moz-border-radius-topleft:5px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	display:none;
	background-color:#ddeef6;
	position:absolute;
	width:210px;
	z-index:2000;
	border:1px transparent;
	text-align:left;
	padding:12px;
	top: 24.5px; 
	right: 0px; 
	margin-top:5px;
	margin-right: 0px;
	*margin-right: -1px;
	color:#789;
	font-size:11px;
	overflow:auto;
	
}

#signin_menu input[type=text], #signin_menu input[type=password] {
	display:block;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #ACE;
	font-size:13px;
	margin:0 0 5px;
	padding:5px;
	width:203px;
}
#signin_menu p {
	margin:0;
}
#signin_menu a {
	color:#6AC;
}
#signin_menu label {
	font-weight:normal;
}
#signin_menu p.remember {
	padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
	clear:both;
	margin:5px 0;
}
#signin_menu p a {
	color:#27B!important;
}
#signin_submit {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0;
	border:1px solid #39D;
	color:#fff;
	text-shadow:0 -1px 0 #39d;
	padding:4px 10px 5px;
	font-size:11px;
	margin:0 5px 0 0;
	font-weight:bold;
	z-index:100;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
	background-position:0 -5px;
	cursor:pointer;
}

.tipsy-inner {
	padding:10px 15px;
	line-height:1.5em;
	font-weight:bold;
}
.tipsy {
	opacity:.8;
	filter:alpha(opacity=80);
	background-repeat:no-repeat;
	padding:5px;
}
.tipsy-inner {
	padding:8px 8px;
	max-width:200px;
	font:11px 'Lucida Grande', sans-serif;
	font-weight:bold;
	-moz-border-radius:4px;
	-khtml-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#000;
	color:white;
	text-align:left;
}
.tipsy-north {
	background-image:url(images/tipsy-north.gif);
	background-position:top center;
}
.tipsy-south {
	background-image:url(images/tipsy-south.gif);
	background-position:bottom center;
}
.tipsy-east {
	background-image:url(images/tipsy-east.gif);
	background-position:right center;
}
.tipsy-west {
	background-image:url(images/tipsy-west.gif);
	background-position:left center;
}
</style>
</head>
<body>
<div id="container" >
<div id = "header">
    
    	<div id = "logo">
        	
        </div>    
	  <div id="topnav"> <a href="registration.php" class="register"> <span> Register </span></a>
       	  <a href="login" class="signin"><span>Sign in</span></a> 
      </div>         
	</div>
	<fieldset id="signin_menu" style="display:block;right:auto;z-index:2001;left:1268px;">
          <form method="POST" id="signin" action="login.php">
		      <label for="username">Username or email</label>
		      <input id="username" name="username" value="" title="username" tabindex="4" type="text">
   			   <p>
		        <label for="password">Password</label>
        		<input id="password" name="password" value="" title="password" tabindex="5" type="password">
		      </p>
      		  <p class="remember">
		        <input id="signin_submit" value="Sign in" tabindex="6" type="submit">
        		<input id="remember" name="remember_me" value="1" tabindex="7" type="checkbox">
		        <label for="remember">Remember me</label>
      		  </p>
		      <p class="forgot"> <a href="#" id="resend_password_link">Forgot your password?</a> </p>
		      <p class="forgot-username"> <A id=forgot_username_link 
				title="If you remember your password, try logging in with your email" 
				href="#">Forgot your username?</A> 
              </p>
    		</form>
  		  </fieldset>
    
    <div id="menubar">
    
    </div>
</div>
</body>
</head>

[whimsical1987]

When I moved the fieldset out of the div. After clicking the sign in button I dont see any drop down. I tried on safari and mozilla. When I removed the "style="display:block;right:auto;z-index:2001;left:1268px;"", then I was able to see the drop down but the menubar was overlapping on the dropdown and again the drop down is towards the extreme right corner

[rosy12]

Hi
CSS Hacks and Issues has a few exciting suggestions all for once you're in a pinch. The aim I'm bill it present is all for angle cipher 4 -- removing blemished course in Firefox.
Thanks
best web designing company india

[whimsical1987]

Is there anyone who could help me with this issue. The signin but has absolute position so, I have issues when viewing the website on a 17'' screen and 13'' screen. I need some help in figuring out the problem. Experts please help me out.