Hey guys, I'm a CSS noob in training you could say, anyway I'm developing a site and I've been spoiled by Firefox. Before I went trying to fix things it worked just as I wanted it to in Firefox but then I just tried chrome and its nothing at all like Firefox, IE behaves the same way as Chrome.

Basically my Navbar is static when resizing the window on Firefox, but on Chrome or IE it will resize the buttons and clump them together. I just recently battled a translucent box to fit into the page behind both the navbar and the content box, that was a chore, it still isnt how I want it, its using width: 100%, but I'd like it to be as tall as my content div and have auto margins on the left and right but they have no effect.

Here is the CSS

Code:
/* Overrides page defaults */
/* 		 				   */
/* 			3-25-11		   */
/* 	     				    */
/*   CSS for rest of pages */

* {
	
	margin: 0;

}

body {
	
	background-color: rgb(51,51,51);
	font-family:Arial,Helvetica,sans-serif;
	font-size:10px;
	
} 

#wrapper 
{
	width: 100%;
    color:#FFFFFF; 
	overflow: hidden;
	
}

#header {

    background: url('../images/navbar.gif') repeat scroll 0 0;
	margin-left: auto;
    height: 49px;

	color: white;
    padding: 7px 0 0 7px;

	
}

#navBar
{
	font-size: 125%;
	font-weight: bold;
	color: white;
	height: 48px;
	padding: 16px 0px 0 0;
	text-align: center;
	position: absolute;
	top: 7px;
	left: 300px;
	right: 300px; 
}

#navBar a
{
	color: white;
	padding: 10px 20px;
	text-decoration: none;
}

#navBar a:hover {

	/*background-color: rgb(102, 102, 102);*/
	background-image: url('../images/hover.gif');
	color: black;

}

#contentcontainer  {


	position: relative;
	width: 700; /* remember to set a width */
	color:#FFFFFF;
	clear: both;

}

.overlay {


	  position: absolute;
	  top: 0; /* These positions makes sure that the overlay */
	  bottom: 0;  /* will cover the entire parent */
	  left: 0;
	  width: 100%;
	  background: black;
	  margin: 0;
	  opacity:0.3;  
      filter:alpha(opacity=30);  
      -moz-opacity:0.3; 
}


/*#wrapper #contentcontainer #transparency {

 
    background-color: red;  
	height: 700px; /* Take off when content exists 
	width: 400px
	margin-top: 82px;
	margin-bottom: 40px;
    position:absolute;  
    top:0px;  
    left:0px;  
    z-index: -1;
	opacity:0.5;  
    filter:alpha(opacity=50);  
    -moz-opacity:0.5; 

} */

#contentcontainer .content
{

	width: 700px;
	margin-top: 82px;
	margin-bottom: 40px;
	width: auto;
	position: relative;
	clear: both;
	
		

}

.content {

	position: relative;
	
}

img.logo
{
	display: block;
	margin-left: auto;
	margin-right: auto;

}

#content h1 {
	text-align: center;
	font-weight: bold;
}

#content p {

	text-align: center;
	font-size: 16px;
	color: white;
	font-weight: bold;

}

.getStarted {
	
	text-align: center;
	color: white;
	font-size: 20px;
	font-weight: bold;

}

.getStarted p {
	font-size: 15px;
}

table {
	
	text-align: center;
	margin-left: auto;
	margin-right: auto;

}

#footer 
{
    background: none repeat scroll 0 0 black;
	color: white;
	width: 100%;
    height: 20px;
	color: white;
    padding: 7px 0px 0px 0px;
	
	/* Opacity settings */
	filter: alpha(opacity:0.6);
    KHTMLOpacity: 0.6;
    MozOpacity: 0.6;
    -khtml-opacity: .60;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -moz-opacity:.60;
    filter:alpha(opacity=60);
    opacity:.60;
}

#text p {
	
	margin: 0;
	padding: 0;
	color: white;
	font-size: 120%;
	background-color: black;
	text-align: center;
	font-variant: small-caps;

}
Very messy I know, if you need the HTML source let me know....

Basically the problems are,

1. Resizing is fine in Firefox, but everything clumps together in IE and Chrome, I'd like to know how to make it static,

2. Can the transparent box be made to be margin-left: auto and right? Also it doesnt work on IE8...its just all black, I assume I need a different type of opacity filter...

3. Also, I'd like the footer to be dynamic, as in it expands and contracts depending on the content size, its static right now and I'm kinda afraid to mess with it...