so, I'm designing my webpage and i need some of the dynamic parts to work before i can move on with the design. however, everytime i try to make new functions or anything, they never work. and i know this isnt the section for this question, but my css3 only works in google chrome, none of the animations are working in any other browser. is there something i'm missing. I'll make the parts that i'm talking about bold in the code. All i'm trying to do is make the join button slide down when click without firing a link and slide back up if its clicked again. the other div expands to show the rest of the subscription form. I've tried so many methods trying to figure this out... if anyone can help me, i'd appreciate it. ask me any question to clarify.


This is the Html and Css. They were actually in two seperate files, but i combined them just to show you.
Code:
<!DOCTYPE HTML>
<html>
<head>

<style type="text/css">
@font-face {
  font-family: 'Carbon Block';
  src: url('font/carbonbl.eot');  /* IE6+ */
  src: local('Carbon Block'), 
        url('font/CarbonBl.ttf') format('truetype');  /* Saf3+,Chrome,FF3.5,Opera10+ */
}

.carbon {
	font-family:"Carbon Block"
	color:#fff;
}

#Wrapper{
	width:1900px;
	height:1200px;
	position:absolute;
	overflow:hidden;
	left:auto;
	background:url(Login_Bkgds/Background_1.jpg);
	-moz-background-size:cover;
	background-size:cover;
	background-repeat:no-repeat;
	
}

#contentArea {
	height:700px;
	width:1700px;
	position:absolute;
	top:270px;
	left:-30px;
	overflow:hidden;
	border-width: .3em;
	border-style:solid;
	border-color: #000;
	-webkit-box-shadow:0px 0px 80px white;
	-moz-box-shadow:0px 0px 80px white;
	-o-box-shadow:0px 0px 80px white;
	box-shadow:0px 0px 80px white;
}

#loginPane {
	height:720px;
	width:2000px;
	background:url(Login_Bkgds/Login_pane/Background_1.jpg);
	position:absolute;
	left:-100px;
	top:-10px;
	-moz-border-radius:60px;
	-webkit-border-radius:60px;
	border-radius:60px;
	-webkit-transition-property:all;
	-o-transition-property:all;
	-moz-transition-property:all
	transition-property:all;
	-webkit-transition-duration:.1s;
	-o-transition-duration:.9s;
	-moz-transition-duration:.9s;
	transition-duration:.9s;
}

#dateClip {
	height:170px;
	width:786px;
	position:absolute;
	top:100px;
	left:891px;
	background-color:rgba(0,0,0,.4);
	overflow:hidden
}

#dateContent {
	font-family:"Carbon Block";
	font-size:300px;
	color:#FFF;
	width:12000px;
	height:900px;
	top:-65px;
	left:-15px;
	position:absolute;
	opacity:.4;
}

#timeContent {
	font-family:"Carbon Block";
	font-size:150px;
	color:#fff;
	position:absolute;
	top:50px;
	left:170px;
}

#loginDiv {
	height:600px;
	width:400px;
	margin-left:1200px;
	margin-top:80px;
	background-color:rgb(7,213,201);
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px;
	-webkit-box-shadow:10px 10px 40px black;
	-moz-box-shadow:10px 10px 40px black;
	-o-box-shadow:10px 10px 40px black;
	box-shadow:10px 10px 40px black;
}

#loginSignUp {
	height:185px;
	width:350px;
	position:absolute;
	margin-top:55px;
	margin-left:25px;
	font-family:"Carbon Block";
	font-size:36px;
	color:#fff;	
	overflow:hidden;
	-webkit-transition-property:all;
	-o-transition-property:all;
	-moz-transition-property:all
	transition-property:all;
	-webkit-transition-duration:1s;
	-o-transition-duration:1s;
	-moz-transition-duration:1s;
	transition-duration:1s;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	-moz-transition-timing-function:ease-in-out
}

#joinButton {
	
	font-family:"Carbon Block";
	font-size:36px;
	color:#fff;
	position:absolute;	
	margin-top:240px;
	margin-left:150px;
	-webkit-transition-property:all;
	-o-transition-property:all;
	-moz-transition-property:all
	transition-property:all;
	-webkit-transition-duration:1s;
	-o-transition-duration:1s;
	-moz-transition-duration:1s;
	transition-duration:1s;
}

a {
	-webkit-transition-property:all;
	-o-transition-property:all;
	-moz-transition-property:all
	transition-property:all;
	-webkit-transition-duration:.1s;
	-o-transition-duration:.1s;
	-moz-transition-duration:.1s;
	transition-duration:.1s;
}
a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
font-size:50px;
}
a:active {
	text-decoration: none;
}
</style>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>

<div id='Wrapper'>
	<div id="dateClip">
    	<div id='dateContent'>Aug<font size="5px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  		
        </font>12<font size="5px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  </font>10
        </div>
		
      <div id='timeContent'>XX:XX:XX:XX</div>
	</div>
	
   
    <div id="contentArea">
		<div id="loginPane" class='carbon'>
       	  <div id="loginDiv">
   	  		<div id='loginSignUp'>
               <p><form>
               Alias_
               <br><input type="text" size="53" /><br>
               Passcode_
               <br><input type="password" size="53" /><br>
                   <input type="password" size="53" /><br>
               Email_
               <br><input type="text" size="53" /><br>
               Zipcode_&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dob_
               <br><input type="text" size="19"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" size="19.5" /><br>
               Name_
               <br><input type="text" size="53">
               </form>
            </div>
            <div id="joinButton"><a href="javascript:joinUs(document.getElementById('loginSignUp'))" onclick="joinUs('document.getElementById("loginSignUp")')">Join</a></div>
          </div>			
        </div>
	</div>
</div>

<script type="text/javascript" src="Login.js"></script>
</body>
</html>

and here is the Java Script.
Code:
window.onload=init(document.getElementsByTagName("div")[2], document.getElementsByTagName("div")[3]);
var joinButton=document.getElementByTagName("a");
var joinDiv=document.getElementById('joinButton');
var loginDiv=document.getElementById(loginDiv).style.backgroundColor


function init(obj, obj2) {
	

	var d_colors = new Array("rgb(81,50,123)", "rgb(230,198,20)", 		
	"rgb(222,44,44)", "rgb(7,213,201)", "rgb(7,51,213)", 
	"rgb(137,15,2)", "rgb(38,96,23)");

	var m_names = new Array("Jan", "Feb", "Mar", 
		"Apr", "May", "Jun", "Jul", "Aug", "Sep", 
		"Oct", "Nov", "Dec");

	var d = new Date();
	var curr_day = d.getDay();
	loginDiv.innerHTML
		
	var curr_date = d.getDate();

	var curr_month = d.getMonth();
	var curr_year = d.getFullYear();

	obj.innerText=curr_date + " " + m_names[curr_month] + " " + 			
		curr_year;

	var curr_hour = d.getHours();

		if (curr_hour > -1)
   			{
   			curr_hour = 24 - curr_hour;
   			}
		curr_hour = curr_hour + "";

		if (curr_hour.length == 1)
   			{
   			curr_hour = "0" + curr_hour;
   			}
			
	var curr_min = d.getMinutes();

		curr_min = curr_min + "";

		if (curr_min.length == 1)
   			{
   			curr_min = "0" + curr_min;
   			}
	
	var curr_sec = d.getSeconds();
		curr_sec = curr_sec + "";

		if (curr_sec.length == 1)
   			{
   			curr_sec = "0" + curr_sec;
   			}
		if (curr_sec > -1)
   			{
   			curr_sec = 60 - curr_sec;
   			}
	var curr_msec = d.getMilliseconds();
	obj2.innerText=curr_hour + ":" + curr_min + ":" 
+ curr_sec + ":" + curr_msec ;




setTimeout('init(document.getElementsByTagName("div")[2], document.getElementsByTagName("div")[3])', 1000);
}

	function joinUs (obj) {
	var open="240px";
	if ('joinButton.style.marginTop==="240px"'){
	joinButton.style.marginTop="550px";
	obj.style.height="500px";
	
	}
	else {
	joinButton.style.marginTop="240px";
	obj.style.height="185px";
	}
	}