layering issues with login box...

[vrufusx65v]

NOTE: I coded this site through Google Chrome, i have not made any additions yet to correctly view it in ANY other browser, so please use Google Chrome to view my page to understand my problem...

SITE REFERENCE: LINK

I have a login box that is hidden except for the login/logout button. When clicked, javascript animates the login/logout box down (or up if clicked again) with the following JS code:

$(document).ready(function() {
	$("div.panel_button").click(function(){
		$("div#panel").animate({
			height: "180px"
		})
		.animate({
			height: "180px"
		}, "fast");
		$("div.panel_button").toggle();
	
	});	
	
   $("div#hide_button").click(function(){
		$("div#panel").animate({
			height: "0px"
		}, "slow");
		
	
   });	
	
});

the problem is that the box and button is not layering over my main content area, it pushes the whole content area down. you can see what i mean by going HERE. I want the button and the box itself to be layered over the white content area instead of it just pushing the entire white content area down...

here's some CSS that will hopefully help, its the entire login box + button:

#login-container{
	float:right;
    margin-top:-2px;
    margin-right:148px;
    width:305px;
    text-align:center;
}
#toppanel {
	float:right;
    top:33px;
    width: 305px;
    z-index: 25;
    text-align: center;
    margin-right:0px;
}
#panel {
    width: 500px;
    position: relative;
    top: 1px;
    height: 0px;
	float:right;
    margin-left:px;
    margin-right:px;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}
#panel_contents {
    background: none;
    filter:alpha(opacity=80);
    -moz-opacity:0.80;
    -khtml-opacity: 0.80;
    opacity: 0.80;
    height:350px;
    width:304px;
	float:right;
	margin-top:px;
	margin-right:0px;
    z-index: -1;
}

.border {
    border: 15px #1d1d1d solid;
	-moz-border-bottom-left-radius:30px;
	-moz-border-bottom-right-radius:30px;
	-webkit-border-bottom-left-radius:30px;
	-webkit-border-bottom-right-radius:30px;
	border-bottom-left-radius:30px;
	border-bottom-right-radius:30px;
}

div#login {
	float:right;
    width:240px;
    height:150px;
    right:150px;
    top:110px;
    background:#46392f;
    text-align:left;
}

div#logout {
	float:right;
    width:240px;
    height:150px;
    right:150px;
    top:110px;
    background:#46392f;
    text-align:left;
}

/*
div#login p {
	float:left;
	margin-top:30px;
	margin-left:10px;
    color: #cccccc;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
*/

#login_text {
	color:#CCC;
	font-family: 'myriadpro', Arial, Helvetica, sans-serif;
	font-size:18px;
	text-align:center;
	float:left;
	margin-top:10px;
	margin-left:40px;
}

#logout_text {
	color:#CCC;
	font-family: 'myriadpro', Arial, Helvetica, sans-serif;
	font-size:18px;
	text-align:center;
	float:left;
	margin-top:10px;
	margin-left:10px;
}

div#login input#username {
	float:left;
	margin-top:8px;
	margin-left:60px;
	background:#ccc;
}

div#login input#password {
	float:left;
	margin-top:4px;
	margin-left:60px;
	background:#ccc;
}

div#login input#login_btn {
    /*
	border: 1px #899690 solid;
	*/
	font-family: 'myriadpro-bold', Trebuchet MS, Arial, Helvetica, sans-serif;
	color:#FFF;
	background-color: #000;
	border-color: #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
    cursor: pointer;
	float:left;
	margin-top:10px;
	margin-left:95px;
    /*
	position: relative;
    top: 20px;
    left: 86px;
	*/
}

#logout_btn {
    /*
	border: 1px #899690 solid;
	
	font-family: 'myriadpro-bold', Trebuchet MS, Arial, Helvetica, sans-serif;
	color:#FFF;
	background-color: #000;
	*/
	background-image:url(../images/logout.png);
	width:59px;
	height:20px;
	/*
	border-color: #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	*/
    cursor: pointer;
	float:left;
	margin-top:25px;
	margin-left:90px;
    /*
	position: relative;
    top: 20px;
    left: 86px;
	*/
}

.panel_button {
	float:right;
    margin-right:60px;
    margin-top:px;
    position: relative;
    top: 1px;
    width: 173px;
    height: 54px;
	background-image:url(../images/panel_button.png);
    z-index: 20;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    cursor: pointer;
}

.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 0px;
    left: 4px;
    font-family: Arial, Helvetica, sans-serif;
}

.panel_button a:hover {
color: #999999;
}

.panel_button img{
position: relative;
top: 10px;
border: none;
}

#profile {
	color:#CCC;
	font-family: 'myriadpro', Arial, Helvetica, sans-serif;
	font-size:18px;
	text-align:center;
	float:left;
	margin-top:15px;
	margin-left:25px;
}

#profile a:hover {
	color:#FFF;
}

#notifications {
	color:#CCC;
	font-family: 'myriadpro', Arial, Helvetica, sans-serif;
	font-size:18px;
	text-align:center;
	float:left;
	margin-top:35px;
	margin-left:-76px;
}

#notifications a:hover {
	color:#FFF;
}

and here's the HTML for my entire login box + Button:

<div id="login-container">
    	<div id="toppanel">
        	<div id="panel">
            	<div id="panel_contents">
                <?php if ($user->data['user_id'] == ANONYMOUS) { ?>
                	<div class="border" id="login">
                    <div id="login_text">Login to SS Studios:</div>
                        <form id="login_form" action="index.php" method="post">
                        	<input type="hidden" name="remember" value="TRUE" />
                        	<input type="text" size="15" name="username" id="username" onClick="if(this.value == 'Username')
                			this.value='';" onBlur="if(this.value.length == 0) this.value='Username';" value="Username" /><br />
                        	<input type="password" size="15" name="password" id="password" onClick="if(this.value == 'password')
                			this.value='';" onBlur="if(this.value.length == 0) this.value='password';" value="password" /><br />
                        	<input type="submit" accesskey="1" id="login_btn" name="login" value="Login" />
                        </form>
                    </div><!-- End Login -->
                <?php
					}
					else {
                ?>
                	<div class="border" id="logout">
						<label id="logout_text">Welcome, <?php echo $user->data['username']; ?>!</label>
                        <a href="#" id="profile">My Profile</a>
                        <a href="#" id="notifications">Notifications</a>
                        <?php echo "<a href=\"index.php?mode=logout&redirect=\"../../index.php\"\" id=\"logout_btn\"></a>";?>
                    </div><!-- End Logout Border -->
                <?php
					}
				?>
                </div><!-- End Panel_Contents -->
            </div><!-- End Panel -->
            <div class="panel_button" style="visibility:visible">
            	<img src="images/expand.png" alt="expand"/>
                <?php
					if ($user->data['user_id'] == ANONYMOUS) {
					echo('<a href="#">Login</a>');
					}
					else {
					echo('<a href="#">Logout</a>');
					}
					?>
                <!--<a href="#">Login Here</a>-->
            </div><!-- End Expand Button -->
            <div class="panel_button" id="hide_button" style="display:none;">
            	<img src="images/collapse.png" alt="collapse" />
            	<a href="#">Hide</a>
            </div><!-- End Collapse Button -->
        </div><!-- End toppanel -->
    </div><!-- End Login -->

[misson]

The only boxes that are taken out of the normal flow are floats and absolutely and fixed positioned ones. Floats won't let you overlay, so you'll need to absolutely position the element you want to appear in front (e.g. #toppanel), and relatively position its parent.

Safari should work as well as Chrome, since they both use the same browser engine. As long as you're coding for the standards, Opera should also work just as well, as will Firefox in almost all cases (it's Acid3 test is in the mid to high '90s, depending on whether you're using 3.6 or 4).

[callumacrae]

Your site acts the same in Safari, Chrome, Firefox and Opera (all for mac). I haven't tested IE, but I doubt it will work the same in IE because nothing ever does

~Callum

[vrufusx65v]

great, i wasnt sure about browser compatibility cause last time i checked my site in firefox and safari [for windows] it wasnt the same as it was for chrome, that's the only reason why i placed the NOTE.

I'll work on absolutely positioning the login box, but which boxes should i remove the floats on?...besides the toppanel box?

---------- Post added at 01:41 PM ---------- Previous post was at 01:38 PM ----------

nevermind that last question, i got it firgured out... thanks