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>
<A class=mainlevel href="http://www.demo.net/index.php?option=com_frontpage&Itemid=1">Home</A>
</TD>
</TR>
<TR align=left>
<TD>
<A class=mainlevel href="http://www.demo.net/index.php?option=content&task=view&id=3&Itemid=27">Contenders</A>
</TD>
</TR>
<TR align=left>
<TD>
<A class=mainlevel href="http://www.demo.net/index.php?option=com_contact&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;
}