Struggling with table borders extending to the edge on a website using master pages and CSS stylesheet. This issue requires some troubleshooting, so any help would be appreciated. The problematic website is here. I need the border under the banner menu to reach all the way to the edge without everything getting mashed up when removing the border spacing element from the mainTable style rule. Relevant code below:
<table class="mainTable">
<tr>
<td class="masterBannerTop" colspan="6" >
<a href="Default.aspx"><img style="border: none; display: block; margin: 0 auto;" alt="Travel Joan's Blog Banner" src="Website%20Photos/HeadBanner.jpg" /></a>
</td>
</tr>
<tr>
<td class="masterBannerNav"><a href="Default.aspx">HOME</a></td>
<td class="masterBannerNav"><a href="About.aspx">ABOUT ME</a></td>
<td>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Font-Size="16pt">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="masterBannerMenu" />
</LevelMenuItemStyles>
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="subMenuStyle" />
</LevelSubMenuStyles>
<Items>
<asp:MenuItem Text="WHERE I'VE BEEN" NavigateUrl="~/whereivebeen.aspx">
<asp:MenuItem Text="UNESCO Sites" NavigateUrl="~/unesco.aspx" />
<asp:MenuItem Text="Places" NavigateUrl="~/BlogPosts.aspx" />
</asp:MenuItem>
</Items>
</asp:Menu>
</td>
<td class="masterBannerMenu">
<asp:Menu ID="Menu2" runat="server" Orientation="Horizontal">
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="masterBannerMenu" />
</LevelSubMenuStyles>
<Items>
<asp:MenuItem Text="PHOTOGRAPHY" NavigateUrl="~/photos.aspx">
<asp:MenuItem Text="Street Photos" NavigateUrl="~/StreetPhotos.aspx" />
<asp:MenuItem Text="People Photos" NavigateUrl="~/PeoplePhotos.aspx" />
</asp:MenuItem>
</Items>
</asp:Menu>
</td>
<td class="masterBannerNav"><a href="Links.aspx">LINKS</a></td>
<td class="masterBannerNav"><a href="Contact.aspx">CONTACT ME</a></td>
</tr>
<tr>
<td colspan="6">
</td>
</tr>
<tr>
<td colspan="6" style="border-bottom: 1px solid #DDDDDD;">
</td>
</tr>
CSS for referenced elements:
.mainTable
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid #DDDDDD;
border-spacing:30px;
}
.masterBannerTop a
{
background-color: transparent;
display: block;
margin: 0 auto;
border:none;
}
.masterBannerNav a
{
font-family:"Century Gothic";
font-size: 16pt;
width: auto;
text-align: center;
color: Black;
text-decoration: none;
white-space: nowrap;
}
.masterBannerMenu a
{
font-family:"Century Gothic";
font-size: 16pt;
width: auto;
text-align: left;
color: Black;
text-decoration: none;
}
Tried ensuring no padding in .mainTable, any other suggestions?