我的导航栏在 FF 中的位置不正确答案

【问题标题】：My navbar is incorrectly positioned in FF我的导航栏在 FF 中的位置不正确
【发布时间】：2011-06-23 21:26:52
【问题描述】：

在 IE 中，导航栏位置正确，位于顶部居中。但是在 FF 中，它一直向右移动。我已经查看了代码，但仍然无法弄清楚。有任何想法吗？提前致谢！

#wrapper
{
display: block;
border: 0px solid red;
width: 896px; /*background:white;*/
margin: 0em auto;
padding: 0em;
display: block;
text-align: left;
height: auto;
}
#wrapperInner
{
display: block;
border: 0px solid red;
width: 896px; /*background:white;*/
margin: 0em auto;
padding: 0em;
display: block;
height: auto;
}

/*Menu----------------------------------------------------*/

/*------Tabs---------*/

#tabNav
{
width: 895px;
border: 0px solid red;
}

#tabNav table
{
width: 895px;
border: 0px solid red;
}
#tabNav td
{
border: 0px solid blue;
padding: 0px;
vertical-align: middle;
}
#tabNav img
{
padding: 0px;
vertical-align: bottom;
}

<div id="tabNav">
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td id="MainNavigation1_tab0" align="center" valign="bottom" class="tabPos1-OffHome">
            &nbsp;</td>

        <td id="MainNavigation1_tab1" align="center" valign="top" class="tabOffHome" style="vertical-align: top;">
            <a href="ourMenu.aspx" class="navLink">
                <img id="MainNavigation1_imgOurMenu" onMouseOver="this.src='images/tabMenuOvr.gif';" onMouseOut="this.src='images/tabMenuOff.gif';" src="images/tabMenuOff.gif" style="border-width:0px;" /></a></td>

        <td id="MainNavigation1_tab1Over" valign="bottom" class="tabOverlapOffHome">
            &nbsp;</td>

        <td id="MainNavigation1_tab2" align="center" class="tabOffHome" style="vertical-align: top;">
            <a class="navLink" href="account.aspx">
                <img id="MainNavigation1_imgExpress" onMouseOver="this.src='images/tabExpressOvr.gif';" onMouseOut="this.src='images/tabExpressOff.gif';" src="images/tabExpressOff.gif" style="border-width:0px;" /></a></td>

        <td id="MainNavigation1_tab2Over" valign="bottom" class="tabOverlapOffHome2">
            &nbsp;</td>

        <td id="MainNavigation1_tab3" align="center" class="tabOff" style="vertical-align: top;">
            <a class="navLink" href="customerCenter.aspx">
                <img id="MainNavigation1_imgCustomer" onMouseOver="this.src='images/tabCustCareOvr.gif';" onMouseOut="this.src='images/tabCustCareOff.gif';" src="images/tabCustCareOff.gif" style="border-width:0px;" /></a></td>

        <td id="MainNavigation1_tab3Over" valign="bottom" class="tabOverlapOff">
            &nbsp;</td>

        <td id="MainNavigation1_tab4" align="center" class="tabOff" style="vertical-align: top;">
            <a class="navLink" href="ordering.aspx">

                <img id="MainNavigation1_img101" onMouseOver="this.src='images/tabOrder101Ovr.gif';" onMouseOut="this.src='images/tabOrder101Off.gif';" src="images/tabOrder101Off.gif" style="border-width:0px;" /></a></td>

        <td id="MainNavigation1_tab4Over" valign="bottom" class="tabOverlapOff">
            &nbsp;</td>

        <td id="MainNavigation1_tab5" align="center" class="tabOff" style="vertical-align: top;">
            <a class="navLink" href="skinnyUs.aspx">
                <img id="MainNavigation1_imgSkinny" onMouseOver="this.src='images/tabSkinnyOvr.gif';" onMouseOut="this.src='images/tabSkinnyOff.gif';" src="images/tabSkinnyOff.gif" style="border-width:0px;" /></a></td>

        <td id="MainNavigation1_tab5Over" valign="bottom" class="tabOverlapOff">

            &nbsp;</td>

        <td id="MainNavigation1_tab6" align="center" class="tabOff" style="vertical-align: top;">
            <a class="navLink" href="joinUs.aspx">
                <img id="MainNavigation1_imgJoin" onMouseOver="this.src='images/tabJoinUsOvr.gif';" onMouseOut="this.src='images/tabJoinUsOff.gif';" src="images/tabJoinUsOff.gif" style="border-width:0px;" /></a></td>

        <td id="MainNavigation1_tab6Over" valign="bottom" class="tabOverlapOff">
            &nbsp;</td>

        <td id="MainNavigation1_tab7" align="center" class="tabOff" style="padding-left: 7px; vertical-align: top;">

            <a class="navLink" href="faqs.aspx">
                <img id="MainNavigation1_imgFAQs" onMouseOver="this.src='images/tabFaqsOvr.gif';" onMouseOut="this.src='images/tabFaqsOff.gif';" src="images/tabFaqsOff.gif" style="border-width:0px;" /></a></td>

        <td id="MainNavigation1_tab7Over" align="center" class="tabPos7-Off">
            &nbsp;</td>

    </tr>
    <tr id="MainNavigation1_trLowerNav">
<td id="MainNavigation1_tdLowerNav" class="bgMenuHome-Off" colspan="15">
            <!--inner tab nav-->

            <div id="MainNavigation1_subNavHome" class="subNav">
                <br />
            </div>

【问题讨论】：

这是服务器端脚本。能否提供生成的 HTML？
我认为this 非常简洁地总结了这个问题。
我知道有很多错误。在我的估计中，该网站需要完全拆除并重建。但是，我时间紧迫，而且不完全是网络开发人员（营销/图形设计是的，编码不多），而且我的技能充其量是适中的。我只是希望可能有一个我没见过的简单修复（也就是一个 div 是打开的，或者类似的东西）

标签： html css html-helper navbar

【解决方案1】：

将float:left 添加到#tabNav table。在 Firefox 5 中对我来说看起来很完美。

【讨论】：

谢谢，我试试看。奇怪的是它看起来对你来说是正确的。我也在使用FF5，而且还很遥远。无论如何，感谢您的建议！
@Kyle G 在添加浮动后对我来说看起来很完美。
完美，感谢您的帮助！这个网站一直是我学习的重要资产，我希望我能继续学习更多！

【解决方案2】：

您的文档顶部是否声明了 doctype？如果没有，你需要一个......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

另外，你为什么使用表格？

【讨论】：

抱歉，各位延迟回复了。是的，我确实声明了一个文档类型。在我开始之前，其他人设计了网站，所以我不确定他们为什么使用表格，但客户不想改变。我在上面添加了渲染的 HTML。感谢您的帮助！

【解决方案3】：

我插入了您的代码并找到了答案。您所要做的就是将以下内容添加到#tabnav id

边距：0 自动；

【讨论】：