CSS position on my site, please help

[Dirt_Diver]

I am having some issues with my CSS coding on my site, I am looking at it with FF3 and it's slightly to the left side of the screen. In IE it is perfectly centered.

Can someone tell me where my error is or let me know why it is doing what it is doing???

I would just like to have it centered on the page.

My site is www.JosephSalmi.com and the CSS code I have there is:

#my_banner {
width: 750px;
height: 30px;
margin: 0 auto;
background: () no-repeat;
}

/* Start Menu CSS */
.menu {
      position: relative;
      display: block;
      z-index: 99;
      padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
      height: 20px;   /* menu container (div .menu) */
      width: 700px;   /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
     _width: 670px; /* IE 6 */
      margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {      z-index: 99;
      padding: 10px 0px 10px 0px;  /* this effects menu centering if too big */
      margin:0 auto;              /* this maybe not needed?  */
      list-style-type: none;
}

.menu ul li {
   /* margin: 0 2px 0 2px;  */  /* adds space between main menu boxes */
      float:left;    /* WARNING: float right reverses menu */
      position:relative ;
}

.menu ul li a, 
.menu ul li a:visited {
      display: block;
      font-size: 1em;         /* main buttons */
      color: #ffffff;         /* main buttons text non-hover*/
      font-family:"Verdana","Arial","Helvetica";
      text-decoration:none;
      text-align: center;     /* centers text in buttons */
      width: Auto;            /* main box width AFFECTS INFORMATION FIELD*/
      height: 20px;           /* main box height */
      border: 1px solid  #8ac71c;  /* start your design with borders on, easier to position DD's & FO's */
      border-width: 1px 1px 1px 1px;
      background: #000;    /* main button color */
      padding: 0px 12px;      /* FF Padding */
     _padding: 0px 8px;    
      line-height: 20px;      /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
      width: 60px; w\idth: 60px;      /* IE main button */
}

.menu ul li ul {
      display: none;}

       /*                             */
       /* Specific to Non-IE browsers */
       /*                             */

.menu ul li:hover a { 
      color: #000;       /* main when hover DD */
      background: #8ac71c;  /* main when hover DD */
}

.menu ul li:hover ul {
      display: block;
      position: absolute;  
      top: -4px;            /* FF DD up down */
      margin-top: 17px;     /* FF main mouse active vertical */
      left: 0px;            /* FF DD right left */
      width: 104px;         /* unknown */
}

.menu ul li:hover ul li ul {
      display: none;
}

.menu ul li:hover ul li a {      z-index: 99;
      display: block;
      background: #000;       /* DD FO non-hover */
      color: #fff;           /* DD FO non-hover */
      height: auto;
      line-height: 20px;      /* DD FO box height */
      padding: 0px 0px;
      width: 140px;            /* DD FO box width */
}

.menu ul li:hover ul li a:hover {      z-index: 99;
      background: #8ac71c;     /* DD FO hover */
      color: #000;             /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {      z-index: 99;
      display: block;
      position: absolute;
      left: 140px;           /* FF FO right left EDITING*/
      top: -27px;            /* FF FO up down  */
      width: 146px;          /* FF FO box width */
}

      /*                             */
      /*   Specific to IE browsers   */
      /*                             */

.menu ul li a:hover {
      z-index: 99;
   /* text-decoration: none;  */  /* might be needed */
      color: #000;               /* main hover */
      background: #8ac71c;        /* main hover */
}

.menu ul li a:hover ul {
      z-index: 99;
      display: block;
      position: absolute; 
      top: 2px;                /* DD container up down */
      background: none;        /* gets rid of DD container */
      margin-top: 7px;         /* DD container up down */
      left: 0px;               /* DD right left */
}

.menu ul li a:hover ul li a {
      z-index: 99;
      display: block;
      background: #000;        /* IE DD color non-hover */
      color: #fff;               /* IE DD color non-hover */
      height: auto;
      line-height: 20px;        /* IE DD FO box height */
      padding: 0px; 
      width: 145px;             /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
      z-index: 99;
      visibility:hidden;
      position:absolute;
      height: 0;
      width: 0;
}

.menu ul li a:hover ul li a:hover {
      background: #8ac71c;         /* DD FO hover */
      color: #000;                 /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
         display: block;
         position: absolute;  
         top: -22px;                    /*   FO up down    */
         color: #000000;                /*   unknown       */
         left: 147px;                   /*   FO right left */
} 

          /*ADD TO FIX IE*/
          /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
         width: 125px; 
         w\idth: 139px;
}

    /* another hack for IE5.5 */

* html .menu ul ul {
         top: 30px;
         t\op: 31px;       /* IE gap between main bar and the dropdown items */
}

          /* style the table so that it takes no part in 
             the layout - required for IE to work */
.menu table {
         position:absolute;
         top:auto 0; left:0;
}

      /* yet another hack for IE5.5 */

* html .menu ul ul a {
         width: auto;             /* unknown */
         w\idth: auto;             /* DD FF width */
}

         /*END EXTRA ADDS FOR IE*/

          /* ADD TO HIDE EXTRA LEVELS */
          /* make the 2nd level visible when 
             hover on 1st level list OR link */
.menu ul a:hover ul,  /* IE */
.menu ul:hover ul {   /* FF */
         visibility:visible;
}

          /* keep the 3rd level hidden when you 
             hover on 1st level list OR link */
.menu ul a:hover ul ul,  /* IE */
.menu ul:hover ul ul {   /* FF */
         visibility:hidden;
}

          /* keep the 4th level hidden when you 
             hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul,  /* IE */
.menu ul li:hover ul li:hover ul ul {     /* FF */
         visibility:hidden;
}

         /* make the 3rd level visible when you hover 
            over 2nd level list OR link */
.menu ul a:hover ul a:hover ul,   /* IE */
.menu ul:hover ul:hover ul {      /* FF */
         visibility:visible;
}

         /* make the 4th level visible when you 
           hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul,   /* IE */
.menu ul li:hover ul li:hover ul li:hover ul {        /* FF */
         visibility:visible;
}

[Snookerman]

I can't see it shifting to the left in FF. Can you be more specific?

[Dirt_Diver]

It looks like this on my screen and some of my clients screens.



It should be centered under the banner

[Snookerman]

Ok, so you were talking about the menu bar. I looked at it in both FF3, FF3 with IE tab (shows it just like IE) and in IE7 and they are all to the left of the logo. So there is no difference between IE7 and FF3 on my computer anyway.

[Snookerman]

I looked at your page source and the container you have the menu in has an id value "menu", however your css says .menu which means its a class value. Try changing your container from <div id="menu"> to <div class="menu">

[Dirt_Diver]

Where do you see <div id="menu">???

Here is some of the code where I have it as a class, am I missing something else?

 <div id="bodyWrapper">
            <!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
        <div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
        <div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
    <div id="navbar">
<div align="center">
<div class="menu">
<ul>
    <li><a href="/">Home</a></li>

    <li><a href="/galleries">Galleries</a></li>
    <li><a class="drop" href="/gallery/6115984_zFSdJ">Client<font color="black">_</font>Proofing 
        <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>

[Snookerman]

Sorry mate, my mistake. Here you go:
.menu {
position: relative;
display: block;
z-index: 99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 570px;
Works for me, tested it in FF3 and IE7.

[Dirt_Diver]

okay I had to adjust it to 580px because 570px was wrapping my last button under the first one so that helped some but it's still not acting right...

Start with clicking on the home link or the gallery link and see how the navbar acts. See the positions of all the links and drop downs. Noe if you go to If you look at the Information tab it has slid over to the far right in FF3 but is fine in IE7+.

Then if you click on "Client proofing > Engagements > Wes & Lindsay" (it's a dead link) the navbar changes and "more" drops down under "home"...

[Snookerman]

Sorry but it looks fine to me (which is a good thing), maybe it's just your computer. Have you tried other computers?

[Dirt_Diver]

Unfortunately I have, I get the same thing on all my screens.

Anyway I will just leave it like it is and wait for someone else to tell me about it I guess.


Thank you for all the help,

Joe