MainMenu structure interferes with CSS Design -- Feedback Wanted

Pacal · 20.06.2004, 20:32

I'm attempting to dress the mainmenu module by defining a td background. Unfortunately there's an additional row reserved for mainmenu module contents which destroys the visual appearance of the menu. Is there a way in which I can void that instance of TD or re-structure mainmenu.php-- I was considering an all CSS approach-- to render the table differently. I'm still trying to determine a course of action here and some feedback would be valued.

Code:

<TABLE class=moduletableMainMenu>
  <TBODY>
  <TR>
    <TH vAlign=top>Main Menu</TH>
  </TR>
  <TR>
    <TD> <!-- Here's the problem -->
      <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
        <TBODY>
        <TR align=left>
          <TD>&nbsp;
            <A class=mainlevel href="http://www.demo.net/index.php?option=com_frontpage&amp;Itemid=1">Home</A> 
          </TD>
        </TR>
        <TR align=left>
          <TD>&nbsp;
            <A class=mainlevel href="http://www.demo.net/index.php?option=content&amp;task=view&amp;id=3&amp;Itemid=27">Contenders</A> 
          </TD>
        </TR>
        <TR align=left>
          <TD>&nbsp;
            <A class=mainlevel href="http://www.demo.net/index.php?option=com_contact&amp;Itemid=3">Contact Us</A>
          </TD>
        </TR>
        </TBODY>
      </TABLE>
    </TD>
  </TR>
  </TBODY>
</TABLE>

Here's the CSS referenced by MainMenu.php table class=moduletableMainMenu.

Code:

table.moduletableMainMenu	{
	text-align: left;
	margin: 5px 0px 5px 0px;
	width: 100%; 
	}
	
table.moduletableMainMenu th {
	background: url(../images/makeup/navbar_heading_bg.gif) no-repeat;
	height: 16px;
	margin: 5px 0px 5px 0px;
	padding: 2px 0px 0px 0px;
	font-size: 11px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: small-caps;
	color: #D9D9D9;
	text-align: left;
	}
	
table.moduletableMainMenu td {
	background: url(../images/makeup/navbar_td_bg.gif) no-repeat;
	height: 17px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	text-align: left;
	}