Hi
I'm using a two cell table for my navigation layout (which I should probably be using css). The left is cell is a hyper link. The right cell contains an ASP.NET menu control.
When the page renders in IE7, both the hyper link and menu on the same line.
When using FF2, FF3 or IE8 the menu is causing its cell to increase in size. If I remove the menu its works fine. I believe the issue is w/ the DIV tags the menu control generates.
How should I change the code so both the left and right navigation items appear on the same line?
<table width="100%" cellpadding="0" cellspacing="0">
<tr id="trBanner" runat="server" style="background-image: url(Images/Header_Blue.jpg); height:124px">
<td colspan="2"></td>
</tr>
<tr id="trMenu" runat="server" style="background-image: url(Images/bluegradient.jpg); background-repeat">
<td align="left"> <asp:HyperLink ID="HyperLink1" ForeColor="White" Font-Names="verdana" Font-Bold="true" Font-Size="10pt" NavigateUrl="~/Summary.aspx" runat="server" style="text-decoration: none">Summary</asp:HyperLink></td>
<td align="right" >
<asp:Menu ID="mainMenu" Orientation="Horizontal" runat="server" DataSourceID="siteMapDataSource" style="vertical-align:top">
<StaticMenuItemStyle CssClass="navnormal" ForeColor="White" ItemSpacing="5" />
<StaticHoverStyle CssClass="navhover" />
<StaticSelectedStyle CssClass="navselected" />
<DynamicMenuStyle CssClass="navnormal" BackColor="white" BorderColor="Black" BorderStyle="Solid" />
<DynamicHoverStyle CssClass="navhover" BackColor="Navy" />
</asp:Menu>
<asp:SiteMapDataSource ID="siteMapDataSource" runat="server" ShowStartingNode="false" />
</td>
</tr>
<tr id="trRedBar" runat="server" style="background-image: url(Images/redbar.gif); height:9px">
<td colspan="2"></td>
</tr>
</table>