Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5.
My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated!

-------------------------------------
Here's the HTML:

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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title> 
<link rel="shortcut icon" href="layout/hoot.ico" /> 
<link rel="stylesheet" type="text/css" href="athena.css" /> 
 
</head> 
 
<body> 
 
<div id="page-wrap"> <!-----page wrap div start------> 
 
<div id="top"> <!-----top div start ------> 
 
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" /> 
 
</div> <!-----top div end ------> 
 
<div id="navbar"> <!-----nav bar BACKGROUND div start------> 
 
</div> <!-----nav bar BACKGROUND div end------> 
 
<div id="navigation">  <!-----navigation div start------> 
 
<ul id="menu"> 
			<li class="owl"><a href="index.html">Owl</a></li> 
			<li class="contact"><a href="/contact/">Contact</a></li> 
			<li class="portfolio"><a href="/portfolio/">Portfolio</a></li> 
            <li class="home"><a href="index.html">Home</a></li> 
		</ul> 
 
</div>  <!-----navigation div start------> 
 
</div> <!-----page wrap end div------> 
 
 
</body> 
</html>
-----------------------------------------
And here's the CSS:


Code:
@charset "UTF-8";
/* CSS Document */

body { 
            width:100%;
			font-size: 13px;
		font-family: Helvetica, Verdana, Arial, sans-serif;
		line-height: 1.4;
              background: url(../layout/bg.png);
			  background-attachment:fixed;
		margin:0;
		padding:0;
		text-align: center;
}

a, a:link {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color: #31636c;
	text-decoration: none;
}

a.footer:link { 
color: #ddcfb2; 
}

a.footer:hover { 
color: #ddcfb21; 
}

a.footer:visited { 
color: #ddcfb2; 
}

a.footer:active { 
color: #ddcfb2; 
}


#page-wrap {
  width: 100% ;
  margin: auto ;
  text-align: center;
}


#top {
	width:100%;
	background:url(layout/skybg.png);
	background-repeat:repeat-x;
	text-align: center;
		position:relative;
	z-index: 500;
}


#navbar {
	width:100%;
	height:102px;
	margin-top:-139px;
	padding-top:15px;
	background:url(layout/navbg.png);
	background-repeat:repeat-x;

}

#navigation {
	width:100%;
	height:155px;
	text-align:center;
	margin-top:-154px;
}
	


/* Everything CSS Sprite Menu */
	ul#menu {
	text-align:center;
		position:relative;
	z-index: 501;
	padding:0;
	list-style:none;
	clear:both;}
	
		#menu li{overflow:hidden;
		text-indent:-9999px;
		display:inline;
		text-align:center;
		float:left;
		margin-right:10px;}
			#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}

			/* Owl Button */
			#menu li.owl{width:158px; height:146px;}
				#menu li.owl a{background-position:0px 0px;}
				#menu li.owl a:hover{background-position:0px -2px;}

			/* Contact Button */
			#menu li.contact{width:150px; height:158px;}
				#menu li.contact a{background-position:-158px 0px;}
				#menu li.contact a:hover{background-position:-158px -2px;}

			/* Portfolio Button */
			#menu li.portfolio{width:238px; height:146px;}
				#menu li.portfolio a{background-position:-308px 0px;}
				#menu li.portfolio a:hover{background-position:-308px -2px;}
				
			/* Home Button */
			#menu li.home{width:114px; height:146px;}
				#menu li.home a{background-position:-546px 0px;}
				#menu li.home a:hover{background-position:-546px -2px;}




NEVER MIND. Got it. lol