Hello,

I have the below HTML code and CSS, the problem I'm having is with the div id = "nav". It is supposed to appear just under the header, a thin strip. In IE 8 it appears fine, however when I preview it in FF 3.6, the whole webpage renders fine except the nav bar, it just doesnt show up.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="rollver_btn.js">
</script>


<title>Home- Intranet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Header_Footer.css" />
<style type="text/css">
.style1 {
	text-align: center;
}
.style2 {
	text-align: left;
	font-size: x-small;
}
</style>
</head>

<body>
<div id="outer"> <div id="left" style="left: 0px; top: 0px"> 
        
  <a href="www.google.com" id="quality_btn" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;"><img name="image2" alt="Quality" src="quality_btn.png" style="border-style: none"/></a>
  <a href="www.google.com" id="operations_btn" onmouseover="image3.src=loadImage3.src;" onmouseout="image3.src=staticImage3.src;"><img name="image3" alt="Operations" src="operations_btn.png" style="border-style: none"/></a>
  <a href="www.google.com" id="sales_btn" onmouseover="image4.src=loadImage4.src;" onmouseout="image4.src=staticImage4.src;"><img name="image4" alt="Sales" src="sales_btn.png" style="border-style: none"/></a>
  <a href="www.google.com" id="finance_btn"  onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;"><img name="image1" alt="Finance" src="finance_btn.png" style="border-style: none"/></a>	
   </div>
	
	<div id="centrecontent">
	<div id="nav"></div>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
  <div id="clearfooter"></div>  <!-- to clear footer -->
</div><!-- end outer div -->
 
<div id="footer"> 
	<div class="style1">
		<br/>Salem Tube &copy; 2010   <br/>   
		</div>
  <p class="style2"><span style="padding-left:20px">Page Author: Sean Neasham&nbsp;&nbsp;&nbsp;&nbsp; 
	Last Update: 16-November-2010</span></p>
</div>
 
<div id="header">
	<a href="www.google.com" id="home" onmouseover="image5.src=loadImage5.src;" onmouseout="image5.src=staticImage5.src;"><img name="image5" alt="Home" src="home_btn.png" style="border-style: none"/></a>
	<a href="www.google.com" id="salem"> <img name="image6" alt="Salem Logo" src="salem_logo.png" style="border-style: none"/></a>

	</div>
	 
	   
	

</body>
</html>

Code:
body {height:100%}
html {height:100%}
body {
	padding:0;
	margin:0;
	background: url('left.jpg'); /*sets the left column colour*/
	border-color:lime;
	color: #000000;
	
	
}
#outer{
	height:100%;
	min-height:100%;
	margin-left:200px;
	background:white; /*sets the central page colour*/
	border-left:1px solid #000;
	border-right:1px solid #000;
	margin-bottom:-52px;
	color: #000000;



}
 
html>body 

#outer{height:auto;}
 /*for mozilla as IE treats height as min-height anyway*/
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:70px;
	background-image: url('header.jpg'); /*sets the header colour*/
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	overflow:hidden;
	color: #000000;

	}

#nav{
	left:0;
	width:100%;
	height:30px;
	color: black;
	border-color:black;
	background-image:url('nav.jpg');
	border:medium;	
	border-bottom-color:black;
	border-bottom:10px;
	position: relative;

}

#salem { 
	float: right; margin: 15px 15px 50px 50px;
	
	width:160px;
	height:45px;
	background-repeat: no-repeat;
	
}

#home { 
	float: left; margin: 10px 25px 0px 75px;
	width:50px;
	height:50px;
	background-repeat: no-repeat;
	
}

#quality_btn {
	position: absolute;
	width:180px;
	height:35px;
	margin-left:5px;
	margin-top:10px;
}

#operations_btn {
	position: absolute;
	width:180px;
	height:35px;
	margin-left:5px;
	margin-top:50px;
}

#sales_btn {
	position: absolute;
	width:180px;
	height:35px;
	margin-left:5px;
	margin-top:90px;
}

#finance_btn {
	position: absolute;
	width:180px;
	height:35px;
	margin-left:5px;
	margin-top:130px;
}


#left {
	position:relative;/*ie needs this to show float */
	width:200px;
	float:left;
	margin-left:-199px;/*must be 1px less than width otherwise won't push footer down */
	padding-top:72px;/*needed to make room for header*/
}
#left p {
	padding-left:3px;padding-right:2px}
 
 .body {
	font-family: Calibri;
	color: black;
	font-size:medium;
	text-indent:10px;
	
}
#footer {
	width:100%;
	clear:both;
	height:50px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	background: url('footer.jpg');
	background-color: #0A143A; /*sets the footer colour*/
	color: #FFFFFF;
	text-align:center;
	position:relative;
	font-family:Calibri;
	font-size:x-small;
	
}
* html #footer {/*only ie gets this style*/
	\height:52px;/* for ie5 */
	he\ight:50px;/* for ie6 */
	
}
#clearheader{
	height:72px;
	z-index:-1;
	}/*needed to make room for header*/
	
#clearfooter{
	clear:both;
	height:40px;
	}/*needed to make room for footer*/
	
p  {
	margin-top:0
	}
div  {
	margin-top:0
	}/*clear top margin for mozilla*/
	
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

.floatright { float: right; margin: 15px 15px 65px 50px; } 
.floatleft { float: left; margin: 15px 15px 15px 157px; }
Thanks
Sean