code tabel omzetten naar spry

[VOC Brasschaat]

Ik zou graag de opmaak van de tabs gelijkhouden aan die van de vorige. Maar daar werkte alles zo onoverzichtelijk. Nu probeer ik in de spry dezelfde afbeeldingen voor de rand te integreren. Maar blijkbaar kan ik daar maar maximaal 1 afbeelding invoegen. En helaas heb ik tot 3 afbeeldingen daar nodig.

Deze stijl probeer ik te evenaren. (www.voc-brasschaat.be --> bovenste menubar)

<TABLE class=menu style="LEFT: 58px; MARGIN-RIGHT: 5px; POSITION: absolute; TOP: 85px; BORDER-COLLAPSE: collapse" height=27 cellSpacing=0 cellPadding=0 metaid="My website" meta="menu"><tr><td style="background: #ffffff url(/images/swan/menu-left-active.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #ffffff; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/index.html">Home</a></nobr></td>
  <td style="background: #ffffff url(/images/swan/menu-right-active.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/page7.html">Wie zijn wij?</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/Informatie.html">Informatie</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/page8.html">Fotoboek</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/nieuwtjes.html">Actualiteit</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/pagina1.html">Educatief-scholen</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/nestkasten.html">Nestkasten</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/sponsors.html">Sponsors</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td><td style="background: #cccccc url(/images/swan/menu-left.gif) no-repeat right top" width="10"><img width=1 height=1></td>
  <td style="background: #cccccc; padding-left: 5px; padding-right: 5px" align=center valign=middle><nobr><a href="/contact.html">Contact</a></nobr></td>
  <td style="background: #cccccc url(/images/swan/menu-right.gif) no-repeat left top" width="10"><img width=1 height=1></td></tr></TABLE></TD></TR></TBODY></TABLE>
<TABLE style="BORDER-COLLAPSE: collapse" height=400 cellSpacing=0 cellPadding=0 width="100%">

mijn css bestand heeft nu de volgende opmaak...

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #CCC;
padding: 0.5em 0.75em;
color: #000;
text-decoration: none;
margin-right: right;
background-image: menu-right.gif;
background-repeat: no-repeat;
background-position: right top;
}

maar als ik nu een andere image toevoeg (menu-left.gif) verdwijnt de menu-right.gif en blijft de left zelfs achterwegen. Is dit probleem te overbruggen? (een vaste achtergrond voor de tabs isnogal moeilijk omdat ik de breedte van deze tabs wil laten afhangen van de lengte van de inhoud daarvan)