Question

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">&nbsp;&nbsp;<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>
Was it helpful?

Solution

Ended up using FireBug to discover the issue is being caused by the SkipLink image being embedded by the control. Setting SkipLinkText="" property solved the formatting issue but breaks the purpose of SkipLink. Is there another solution?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top