I am trying to customize my header and the links are showing up if you hover over the spot where they would be but the images are not showing up.

the link to the store is: http://fingerprintdesignllc.com/store/

if you hover over the large blank spot right below the logo you will be able to see the links on the status bar and see what i am talking about.

here is the code i inserted:


tpl_header.php

<!--bof custom nav bar -->
<?php include("header.htm") ?>

<!--eof custom nav bar -->


header.htm

<div id="nav_bar">
<!--Giving the unordered list a class of nav-links allows us to target it with CSS and not have other unordered lists in the web page affected. Note that the last list item has a class of borderx2, which basically means "border times two"; this is because our PSD web layout mockup had separators in between each navigation link and when we add our CSS styles later on, we’ll give the last item a 1px border on the left and the right (hence border x 2). -->
<ul>

<li><a id="home" href="/" title="Home"><span>Home</span></a></li>
<li><a id="store" href="/store/" title="Store"><span>Store</span></a></li>
<li><a id="portfolio" href="/portfolio/" title="Portfolio"><span>Portfolio</span></a></li>
<li><a id="about" href="/about/" title="About"><span>About</span></a></li>
<li><a id="contact" href="#" title="Contact Us"><span>Contact Us</span></a></li>

</ul></div><!--end nav_bar -->


style_2.css

/* removes the "bullet" before each list item*/
li {
list-style:none;
float:left;
}
A:link {
color:#000000;
text-decoration: none;
}

A:visited {
color:#000000;
text-decoration: none;
}

A:hover {
color:#000000;
text-decoration: none;
}
a {
outline: none;
}

#home
{
display: block;
width: 220px;
height: 112px;
background: url("images/home_btn.gif") no-repeat 0 0;

}

#home:hover
{
background-position: 0 -112px;
}

#home span
{
display: none;
}

#store
{
display: block;
width: 90px;
height: 112px;
background: url("images/store.gif") no-repeat 0 0;

}

#store:hover
{
background-position: 0 -112px;
}

#store span
{
display: none;
}

#portfolio
{
display: block;
width: 144px;
height: 112px;
background: url("images/portfolio.gif") no-repeat 0 0;

}

#portfolio:hover
{
background-position: 0 -112px;
}

#portfolio span
{
display: none;
}

#about
{
display: block;
width: 132px;
height: 112px;
background: url("images/about.gif") no-repeat 0 0;

}

#about:hover
{
background-position: 0 -112px;
}

#about span
{
display: none;
}


#contact
{
display: block;
width: 268px;
height: 112px;
background: url("images/contact.gif") no-repeat 0 0;

}

#contact:hover
{
background-position: 0 -112px;
}

#contact span
{
display: none;
}



#nav_bar{
height:100px;
}


the nav bar should look as it does on the site's home page:
http://fingerprintdesignllc.com/



thanks in advance for all your help