Navbar problems in different browsers

Question

Please help! I designed a navbar using a preformatted Dreamweaver template, but found that it displays differently in different browsers. The file can be found at
http://www.npc.org/NPC909/links.html
It displays fine in Opera and Safari (both Mac), but in Netscape and Firefox (both Mac) the navbar is bumped onto a second line. In IE (Mac) the navbar is on one line, but the dropdown submenus do not display.
On the PC side, in IE 8 the navbar is vertically stacked while the two submenus display on the far left of the navbar, instead of directly below their parent links. In IE 7 the submenus don't line up with their parent links, and there is a thin black line on the right of the navbar. Again, Safari displays just fine.
Our target audience is most likely to be a PC user with IE as their browser, but any suggestions you can provide to make the navbar and submenus display consistently across all browsers would be greatly appreciated.
Thanks,
Arthur

Answer 1

Hi, Arthur,
I don't notice that you put an id on the li for "orderpub" like this:
<ul class="MenuBarHorizontal" id="MenuBar1">
       <li><a class="MenuBarHorizontal" href="index.html" style="text-decoration: none;">Home</a></li>
       <li><a href="background.html" style="text-decoration: none;">About NPC</a></li>
       <li><a href="#" class="MenuBarHorizontal MenuBarItemSubmenu">Members</a>
         <ul>
           <li><a href="membynam.html" style="text-decoration: none;">By Name</a></li>
           <li><a href="membycom.html" style="text-decoration: none;">By Organization</a></li>
           <li><a href="membycat.html" style="text-decoration: none;">By Category</a></li>
         </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="reportsbydoc.html" style="text-decoration: none;">Reports</a>
         <ul>
           <li><a href="reportsbyyear.html" style="text-decoration: none;">Reports By Year</a></li>
           <li><a href="emergency.html" style="text-decoration: none;">Emergency<br/>
           Planning & Preparation</a></li>
           <li><a href="energyoutlook.html" style="text-decoration: none;">Energy Outlook</a></li>
           <li><a href="environissues.html" style="text-decoration: none;">Environmental Issues</a></li>
           <li><a href="natgas.html" style="text-decoration: none;">Natural Gas</a></li>
           <li><a href="refining.html" style="text-decoration: none;">Refining</a></li>
           <li><a href="research.html" style="text-decoration: none;">Research</a></li>
<li><a href="resourcedev.html" style="text-decoration: none;">Resource Development</a></li>
<li><a href="storage.html" style="text-decoration: none;">Storage</a></li>
           <li><a href="stratpetrolres.html" style="text-decoration: none;">Strategic<br/>
             Petroleum<br/>
           Reserve</a></li>
<li><a href="transport.html" style="text-decoration: none;">Transportation</a></li>
         </ul>
       </li>
       <li id="orderpub"><a style="text-decoration: none;" href="orderpub.html">Order Publications</a></li>
       <li><a href="links.html" style="text-decoration: none;">Links</a></li>
       <li class="MenuBarHorizontal"><a href="contactus.html" style="text-decoration: none;">Contact Us</a></li>
     </ul>
In your CSS file, all you need to do is:
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: default;
    float: left;
    text-indent: 0px;
    width: 9.25em; /* make this slightly narrower */
li#orderpub {
    width: 9.54em; /* make this as wide as it needs to be, adjusting the previous rule as needed also */
You don't actually need all that other coding for
#home {
    font-size: 100%;
    background: #039;
    text-align: center;
    text-indent: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
    list-style: none;
    position: relative;
    cursor: default;
    width: 10%;
#aboutnpc {
    font-size: 100%;
    background: #039;
    text-align: center;
    text-indent: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
    list-style: none;
    position: relative;
    cursor: default;
    width: 15%;
#members {
    font-size: 100%;
    background: #039;
    text-align: center;
    text-indent: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
    list-style: none;
    position: relative;
    cursor: default;
    width: 15%;
#reports {
    font-size: 100%;
    background: #039;
    text-align: center;
    text-indent: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
    list-style: none;
    position: relative;
    width: 15%;
#orderpub {
    font-size: 100%;
    background: #039;
    text-align: center;
    text-indent: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
    list-style: none;
    position: relative;
    cursor: default;
    width: 20%;
#links {
    font-size: 100%;
    background: #039;
    text-align: center;
    text-indent: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
    list-style: none;
    position: relative;
    cursor: default;
    width: 10%;
#contactus {
    font-size: 100%;
    background: #039;
    text-align: center;
    text-indent: 0px;
    margin: 0px;
    padding: 0px;
    float: left;
    list-style: none;
    position: relative;
    cursor: default;
    width: 15%;
which I would restyle as the following, in case you did want them:
li#home, li#aboutnpc, li#members,li#reports, li#orderpub, li#links, li#contactus {
       font-size: 100%;
     background: #039;
     text-align: center;
     text-indent: 0px;
     margin: 0px;
     padding: 0px;
     float: left;
     list-style: none;
     position: relative;
     cursor: default;
li#home {width: 10%;}
li#aboutnpc {width: 15%;}
li#members {width: 15%;}
li#reports {width: 15%;}
li#orderpub {width: 20%;}
li#links {width: 10%;}
li#contactus {width: 15%;}
Applying those ids to the html, we get:
<ul class="MenuBarHorizontal" id="MenuBar1">
       <li id="home"><a class="MenuBarHorizontal" href="index.html" style="text-decoration: none;">Home</a></li>
       <li id="aboutnpc"><a href="background.html" style="text-decoration: none;">About NPC</a></li>
       <li id="members"><a href="#" class="MenuBarHorizontal MenuBarItemSubmenu">Members</a>
         <ul>
           <li><a href="membynam.html" style="text-decoration: none;">By Name</a></li>
           <li><a href="membycom.html" style="text-decoration: none;">By Organization</a></li>
           <li><a href="membycat.html" style="text-decoration: none;">By Category</a></li>
         </ul>
       </li>
       <li id=reports"><a class="MenuBarItemSubmenu" href="reportsbydoc.html" style="text-decoration: none;">Reports</a>
         <ul>
           <li><a href="reportsbyyear.html" style="text-decoration: none;">Reports By Year</a></li>
           <li><a href="emergency.html" style="text-decoration: none;">Emergency<br/>
           Planning & Preparation</a></li>
           <li><a href="energyoutlook.html" style="text-decoration: none;">Energy Outlook</a></li>
           <li><a href="environissues.html" style="text-decoration: none;">Environmental Issues</a></li>
           <li><a href="natgas.html" style="text-decoration: none;">Natural Gas</a></li>
           <li><a href="refining.html" style="text-decoration: none;">Refining</a></li>
           <li><a href="research.html" style="text-decoration: none;">Research</a></li>
<li><a href="resourcedev.html" style="text-decoration: none;">Resource Development</a></li>
<li><a href="storage.html" style="text-decoration: none;">Storage</a></li>
           <li><a href="stratpetrolres.html" style="text-decoration: none;">Strategic<br/>
             Petroleum<br/>
           Reserve</a></li>
<li><a href="transport.html" style="text-decoration: none;">Transportation</a></li>
         </ul>
       </li>
       <li id="orderpub"><a href="orderpub.html" style="text-decoration: none;" class="">Order Publications</a></li>
       <li id="links"><a href="links.html" style="text-decoration: none;">Links</a></li>
       <li id="contactus" class="MenuBarHorizontal"><a href="contactus.html" style="text-decoration: none;">Contact Us</a></li>
     </ul>
Note that each main head li has an id now.
Beth