Background image in elements using css

I thought I had followed the procedure (CSS Anthology p65) to give a navigation bar a backround image but it doesnt apply the effect.

the css code =

.header {
background-image:url(Resources/images/strip.gif);
width:1000px;
height:37px;
padding:0px 0px 0px 0px;
color:#000000;
background-color:transparent;
background-repeat:no-repeat;

}

the applied element =
<tr>
<td align=“center”>
<p class=“header” id=“navigation”>
<a href=“index.html”>Home</a> <span class=“yellow-text-regular”>|</span> <a href=“under_construction.html”>Leisure Events</a> <span class=“yellow-text-regular”>|</span> <a href=“catering.html”>Leisure Events Catering</a> <span class=“yellow-text-regular”>|</span> <a href=“annual_leisure_events.html”>Annual Events</a> <span class=“yellow-text-regular”>| </span><a href=“leisure_events_gallery.html”>Gallery</a><a href=“under_construction.html”> <span class=“yellow-text-regular”>|</span> FAQs </a>| <a href=“contact_leisure_events.html”>Contact Us</a> | 07789 742 828
</p></td></tr>

you can see the whole page at:
www.leisureevents.net/index_working.html

i’m working through a DreamTemplate - which has been a bit of a nightmare with tables within tables within tables!