Weird Scroll And Height Problem.

[Kingy]

Hey guys, I'm sure I'm making some schoolboy errors here, I've made a testpage for basic layout and functions so nothing there is near final. I know there's plenty I should be fixing up but I'm prioritising with the CSS first, so excuse the messiness in this one. ^^http://empulse.dmu.ac.uk/temptest/demo.htmlIf I test that in Opera and Firefox it scrolls fine but it's hidden by the static navigation banner.However in IE it seems to be alright but it doesn't scroll under as the entire page scrolls instead.If I try a height fix on the main container it'll be alright in Opera and Firefox but then the gap will be way too big in IE and it still doesn't scroll anyway. What am I doing wrong this time? Thanks in advance guys. : ]position:absolute on .container2 fixes the cutting off but then the container fliesto the right hand side in IE. The top part still doesn't stick to the top in IE either unlike firefox and opera.

body,p,td,quote,small,form,input,ul,li,ol,label{	/* resetting our page elements */	margin: 0 auto;	padding:0px;	font-family: Verdana, Arial, Helvetica, sans-serif;	text-align:center;}/* Link styling */a:link {	color: #993300;	text-decoration: none;}a:visited {	color: #993300;	text-decoration: none;}a:hover {	color: #CCCCCC;	text-decoration: none;}a:active {	color: #993300;	text-decoration: none;}h1,h2{text-align:justify;margin:0px;padding:0px;font-family: Verdana, Arial, Helvetica, sans-serif;}h3 {	text-align:right;	margin:0px;	padding:0px;	font-family: Verdana, Arial, Helvetica, sans-serif;}body{	/* styling the body */	color: #333;	font-size:13px;	background-color: #333;	text-align:center;	margin:0 auto;}.clear{	/* the clearfix hack */	clear:both;}#rounded{	/* the outermost div element */	width:969px;	margin:0px auto;	/*center it on the page*/	background-color:#000;	top:1px;}.container1{	/* navigation, titles*/	width:969px;	background-color: #000000;	padding:10px 20px 20px 20px;	margin:0px auto;	/*center it on the page*/	overflow:hidden;	position:fixed;	z-index: 1;	text-align:justify;	clear:both;	display:block;}.headercont{	margin:0px auto;	/*center it on the page*/	width:969px;	z-index: 1;}.featheader{	position: absolute;    z-index: 0;}.container2{	/* content */	width:969px; 	color:#FFF;	background-color: #000000;	margin:0 auto;	padding:10px 20px 20px 20px;	height: auto;	top: 142px; /* fix for different height if flash movie goes on top but messes up IE */	position: absolute;	z-index:0;	text-align:justify;}#contalign{text-align:justify;padding: 10px;}ul{	/* the unordered list used in the menu */	margin:10px 0px;}li{	/* we float the li-s, which contain menu links */	list-style:none;	display:block;	float:left;}/* menu list styling */li a,li a:visited{	/* menu links */	padding:5px 20px;	text-align:center;	color:white;	color: #993300;	-moz-border-radius:5px;	/* rounding them */	-khtml-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius:5px;}li a:hover{	color: #CCCCCC;	text-decoration:none;}#pageContent{	/* the container that holds AJAX loaded content */	margin-top:20px;	border:1px dashed #cccccc;	padding:10px;	-moz-border-radius: 5px;	/* rounding the element */	-khtml-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;		z-index:0;}#loading{	/* hiding the rotating gif graphic by default */	visibility:hidden;}

[edit]Also the pages in container2 are loaded by ajax but I don't think that should affect it.I've just found out that the position:fixed element is the thing messing it up. So if I don't fix it the layout doesn't break, however it means I don't get that scroll the way I want it to. Any ideas on how to solve this?

[Kingy]

I managed to nearly fix it all up in the end. The only thing now is after a number of divs and other css stuff, the layout lines up.The pages still hide under the navigation menu div but I think if I set the individual pages so that they have a gap at the top that should solve it.But the navigation menu broke in the process of fixing the layout, any thoughts? :]

body,p,td,quote,small,form,input,ul,li,ol,label{	/* resetting our page elements */	margin: 0 auto;	padding:0px;	font-family: Verdana, Arial, Helvetica, sans-serif;	text-align:center;}/* Link styling */a:link {	color: #993300;	text-decoration: none;}a:visited {	color: #993300;	text-decoration: none;}a:hover {	color: #CCCCCC;	text-decoration: none;}a:active {	color: #993300;	text-decoration: none;}/*headers*/h1,h2{text-align:justify;margin:0px;padding:0px;font-family: Verdana, Arial, Helvetica, sans-serif;}h3 {	text-align:right;	margin:0px;	padding:0px;	font-family: Verdana, Arial, Helvetica, sans-serif;}body{	/* styling the body */	color: #FFF;	font-size:13px;	background-color: #333;	text-align:center;	margin:0 auto;	padding:0px;}.clear{	/* the clearfix hack */	clear:both;}#rounded{	/* the outermost div element */	width:969px;	margin:0px auto;	/*center it on the page*/	background-color:#000;	top:1px;}.container1{	/* navigation, titles*/	width:969px;	background-color: #000000;	padding:10px 20px 20px 20px;	margin:0px auto;	/*center it on the page*/	z-index: 1;	position:fixed;	margin:0;	clear:both;}.headercont{	margin:0px auto;	/*center it on the page*/	width:969px;	z-index: 1;}.featheader{ /* for trying to fix the issues with flash overlapping the wrong parts with respect to z-index */    z-index: 0;}.container2{	/* content */	width:969px; 	color:#FFF;	background-color: #000000;	margin:0 auto;	padding:10px 20px 20px 20px;	height: auto;	/*top: 142px; /* fix for different height if flash movie goes on top but messes up IE */	/*position: absolute;*/	z-index:0;	text-align:justify;	clear:both;}#contalign{text-align:justify;padding: 10px;}ul{	/* the unordered list used in the menu */	margin:10px 0px;}li{	/* we float the li-s, which contain menu links */	list-style:none;	float:left;}#pageContent{	/* the container that holds AJAX loaded content */	margin-top:20px;	border:1px dashed #cccccc;	padding:10px;	-moz-border-radius: 5px;	/* rounding the element */	-khtml-border-radius: 5px;	-webkit-border-radius: 5px;	border-radius: 5px;		z-index:0;}#loading{	/* hiding the rotating gif graphic by default */	visibility:hidden;}