My navbar is incorrectly positioned in FF

Question

In IE the navbar is correctly positioned, centered at the top. However in FF it is moved all the way to the right. I have looked through the code and still cant figure it out. Any ideas? Thanks in advance!

#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>

This is the server side script. Could you provide the generated HTML? — NGLN, Jun 23 '11 at 21:38
I think [this](http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcoolbakers.com%2Fdefault.aspx) sums up the problem pretty succinctly. — rockerest, Jun 27 '11 at 15:08
I am aware of the numerous errors. The site needs to be completely torn down and built back in my estimation. However, I am crunched for time, and am not exactly a web developer (marketing/graphic design yes, coding not so much) and my skill is modest at best. I was just hoping there might be a simple fix that I hadn't seen (aka a div was left open, or something of the sort) — Kyle G, Jun 27 '11 at 15:13

score 1 · Accepted Answer · answered Jun 27 '11 at 15:24

1

Add float:left to #tabNav table. Looks perfect to me in Firefox 5.

answered Jun 27 '11 at 15:24

rockerest

10,412
3
37
67

Thanks, Ill give it a shot. Its strange that it looks correct to you. I am using FF5 also, and it is way off. Regardless, thanks for the advice! – Kyle G Jun 27 '11 at 15:30
@Kyle G Looks perfect to me **after** adding the float. – rockerest Jun 27 '11 at 15:33
1

Perfect, thanks for the help! This site has been a great asset to me in learning and I hope I can continue learning more and more! – Kyle G Jun 27 '11 at 15:39

score 0 · Answer 2 · answered Jun 23 '11 at 22:31

0

do you have a doctype declared at the top of your document? If not, you need one...

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

Also, why are you using tables?

answered Jun 23 '11 at 22:31

kdub

749
2
8
19

Sorry for the delayed response guys. Yes I do have a doctype declared. Somebody else designed the website before I started, so I am not sure why they used tables, but the client doesnt want to change. I have added the rendered HTML above. Thanks for your help! – Kyle G Jun 27 '11 at 14:51

score 0 · Answer 3 · answered Jun 28 '11 at 04:33

0

I plugged your code in and found the answer. All you have to do is add the following to the #tabnav id

margin: 0 auto;

answered Jun 28 '11 at 04:33

kdub

749
2
8
19

My navbar is incorrectly positioned in FF

3 Answers3