I probably have a couple other errors also. But the main thing that's bothering me is being able to see the links in the status bar at the bottom of the screen, but not being able to see the images that make up the Navbar. If I click edit CSS in the web developer toolbar I can see the navbar, but as it's displayed in the site, I cannot.

Any help that is provided will be greatly appreciated....I'm a bit of a noobie when it comes to CSS.


HTML:

<!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" />
<link rel="stylesheet" type="text/css" href="css/layout.css" media="all"/>
<title></title>
</head>

<body>
<ul id="nav">
<li id="nav_abo"><a href="/">AboutUs</a></li
>
<li id="nav_pas"><a href="/ProductsandServices/">ProductsandServices</a></li
>
<li id="nav_pro"><a href="/Promotions/">Promotions</a></li
>
<li id="nav_wor"><a href="/Workshops/">Workshops</a></li
>
<li id="nav_fun"><a href="/FunandGames">FunandGames</a></li
>
<li id="nav_con"><a href="/ContactUs/">ContactUs</a></li
>
</ul>
<img src="images/sidelogo.png" class="sidelogo" alt="sidelogo" /><img src="images/graphicsph1to4.png" class="graphicsph1to4" alt="photos" />
</body>
</html>



CSS:


@charset "utf-8";
/* CSS Document */


body {

margin: 0;
padding: 0;
background-color: #ffcc00;
width: 800px;
}

#nav {
width: 618px;
height: 160px;
top: 91px;
left: 181px;
position: absolute;
background: url(images/navbar.png) no-repeat;
margin: 0;
padding: 0;
z-index: 1;
}

img.sidelogo {
padding: 0;
border: 0;
margin: 0;
z-index: 2;

}
img.graphicsph1to4.png {
padding: 0;
border: 0;
margin: 0;
position: absolute;
z-index: 3;

}

#nav li {
float: left;
}
#nav li a {
position: absolute;
top: 20px;
left: 181px;
margin: 0;
padding: 0;
display: block;
height: 54px;
background: url(images/navbar.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
font-size: 1%;
}
li#nav_abo a {
left: -2px;
width: 129px;
background-position: 0 0;
}
li#nav_pas a {
left: 303px;
width: 90px;
background-position: -129px 0;
}
li#nav_pro a {
left: 393px;
width: 99px;
background-position: -219px 0;
}
li#nav_wor a {
left: 492px;
width: 87px;
background-position: -318px 0;
}
li#nav_fun a {
left: 579px;
width: 88px;
background-position: -405px 0;
}
li#nav_con a {
left: 667px;
width: 84px;
background-position: -493px 0;
}
li#nav_abo a:hover {
background-position: 0 -54px;
}
li#nav_pas a:hover {
background-position: -129px -54px;
}
li#nav_pro a:hover {
background-position: -219px -54px;
}
li#nav_wor a:hover {
background-position: -318px -54px;
}
li#nav_fun a:hover {
background-position: -405px -54px;
}
li#nav_con a:hover {
background-position: -493px -54px;
}
#body_abo li#nav_abo a {
background-position: 0 -108px;
}
#body_pas li#nav_pas a {
background-position: -129px -108px;
}
#body_pro li#nav_pro a {
background-position: -219px -108px;
}
#body_wor li#nav_wor a {
background-position: -318px -108px;
}
#body_fun li#nav_fun a {
background-position: -405px -108px;
}
#body_con li#nav_con a {
background-position: -493px -108px;
}