Ok, you have the right concept, but you aren't quite there. Putting a span tag around the whole template isn't going to do it, you need to apply the styles to individual items. You also shouldn't be using <font> tags or using the 'background' tag, as those are depreicated tags and may not work correctly on newer browsers. Also, the way you have your images called is not quite right. Here's what you need to do:
1. Edit your topbar style to look like this:
Code:
TopBar { FONT-FAMILY: Arial;
COLOR: #001683; FONT-SIZE: 14px;
BACKGROUND: URL(images/barbg.gif); font-weight: bold; text-align: center; font-style: italic;
}
2. Move your background image (barbg.gif) to the x-cart images folder, which is shop/skin1/images.
3. Now change the way you have the TD tags configured on your template to look like this one:
Code:
<td class="TopBar" width="109">Home</td>
4. Get rid of the span tag you added to the template.
This will not only shrink the size of the code, but it will allow you to globally edit the template without having to edit each and every TD tag when you want to adjust the fonts or colors.
Let me know if that works for you.