Pregunta

Estoy usando una tabla de dos celdas para mi diseño de navegación (que probablemente debería usar css). La izquierda es celular es un hipervínculo. La celda derecha contiene un control de menú ASP.NET.

Cuando la página se muestra en IE7, tanto el hipervínculo como el menú en la misma línea.

Al usar FF2, FF3 o IE8, el menú hace que su celda aumente de tamaño. Si elimino el menú funciona bien. Creo que el problema es con las etiquetas DIV que genera el control de menú.

¿Cómo debo cambiar el código para que los elementos de navegación izquierdo y derecho aparezcan en la misma línea?

<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>
¿Fue útil?

Solución

Terminé usando FireBug para descubrir que el problema está siendo causado por la imagen SkipLink incrustada por el control. La configuración de la propiedad SkipLinkText = " " solucionó el problema de formato pero rompe el propósito de SkipLink. ¿Hay otra solución?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top