CSS background & border graphic confusion

Question

I'm helping this lady with a few things on her site but don't know how to fix the purple gradient background (http://mabelspralines.com/images/subBGProd.png) to show behind the Products table (table BG stays white) here
http://mabelspralines.com/_productsFINAL.html   new
to look like it does here:
http://mabelspralines.com/products.html     previous
CSS: http://mabelspralines.com/styles/global.css
Also the original site had this gold shaded border not just at the top like it is now, but down the sides of the content div and the bottom as part of the footer. Here are the images:
http://mabelspralines.com/images/vertbg.jpg
http://mabelspralines.com/images/bottbg.jpg
I tried a few things, but can't seem to make it display like the original designer intended - one wrong CSS adjustment and the whole thing goes haywire.
Also, why is there a 1/2" space above the header on each page?
Thanks for pointing me in the right direction!

Answer 1

I try to keep things simple.
Take the footer for instance. At the moment you have
<div class="footer">
     <ul class="list" id="ftnav">
          <li class="list"><a href="index.html">home</a> |</li>
          <li class="list"><a href="about.html">about</a> |</li>
          <li class="list"><a href="products.html">products</a> |</li>
          <li class="list"><a href="events.html">events</a> |</li>
          <li class="list"><a href="testimonials.html">testimonials</a> |</li>
          <li class="list"><a href="contact.html">contact </a></li>
     </ul>
     <p>&copy; 2009 Mabel's Gourmet Pralines. All rights reserved. Site by SOF Designs</p>       
</div>
The above should look like
<div class="footer">
     <ul>
         <li><a href="index.html">home</a> |</li>
         <li><a href="about.html">about</a> |</li>
         <li><a href="products.html">products</a> |</li>
         <li><a href="events.html">events</a> |</li>
         <li><a href="testimonials.html">testimonials</a> |</li>
         <l><a href="contact.html">contact </a></li>
     </ul>
     <p>&copy; 2009 Mabel's Gourmet Pralines. All rights reserved. Site by SOF Designs</p>       
</div>
This reduces the number of keystrokes during development and makes it a lot easier to read. Also a CLASS does everything that an ID does with the exception of uniqueness. Hence I always use a CLASS except where an ID is required for exact identification. The latter is often used in JS and DOM manipulation.
The style rules for the proposed footer looks like
.footer {
    background: url(http://mabelspralines.com/images/bottbg.jpg) no-repeat;
    height: 40px;
    padding: 15px;
.footer ul {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 0px;
    list-style-type: none;
    margin-left: 238px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
.footer li {
    display: inline;
When using images as in
<img src="http://mabelspralines.com/images/home1.jpg" alt="Home" width="82" height="25" border="0" id="home_bt" />
The red coloured part should be included in the CSS, again reducing keystrokes and making it easier to change the values. But why use (different) images for the menu buttons. If you cannot find a CSS alternative you can use the same image for the menu buttons and use text for the label. This has an added advantage in that your anchor elements are not empty which is frowned upon. Instead of using mouse events, use CSS to replace the image as in
a
a:hover
a:focus
At this stage I will not give you examples for a better functioning menu, I shall leave it up to you to find out. If you run into trouble, please come back here.
Have a look at what Nancy does with CSS menu's http://alt-web.com/DEMOS/demos.shtml