Navigation rendering Issue

[Reliable]

Hi, my navbar renders fine in IE and Chrome, but not in Firefox or mobile devices. Firefox cute it short while mobile devices extend it. Here is the site. Can anyone tell me what I coded wrong or what hack I need to make it right across teh board? Thanks

[LastMitch]

Hi, my navbar renders fine in IE and Chrome, but not in Firefox or mobile devices.

Why do you keep doing this.

You have to post your code.

You can't expect for someone to look at the link without a code in hand to see what is wrong.

So far, it's @media or your position should be fixed not relative?

It's a bit hard to read your code.

[Reliable]

Sorry. Coming right up. That "@media" was really just a hail mary trying to fix the nav bar.

<div id="footer">
<?php include ("footer.html");?></div>
</body>

The included file:

<script type="text/javascript" src="SpryMenuBar.js"></script>

<ul id="MenuBar1" class="MenuBarHorizontal" style="margin-top:-6px">
  <li><a href="index.php" title="home">Home</a>  </li>
  <li><a href="inec-about-us.php" title="about us">About Us</a></li>
  <li><a href="inec-mildred-fennal.php" title="dr. fennal">Our Founder</a>  </li>
  <li><a href="inec-current-projects.php" class="MenuBarItemSubmenu">Current
      Projects</a>
    <ul>
      <li><a href="inec-study-abroad.php" title="study abroad with INEC">Study
          Abroad</a></li>
    </ul>
  </li>
  <li><a href="inec-partners-and-members.php" title="partners and members">Partners &amp; Members</a></li>
  <li><a href="inec-volunteer.php" title="volunteer with INEC">Volunteer</a></li>
  <li><a href="inec-contact.php" title="Get in touch with us">Contact Us</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryMenuBarDownHover.gif", imgRight:"SpryMenuBarRightHover.gif"});
//-->
</script>

The CSS:

#footer {
width: 100%;
margin-top: 32em;
    }



@charset "UTF-8";
@font-face {
    font-family:"Franklin Gothic Book";
    src:url('frabk.ttf');
}
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */

@-moz-document url-prefix() {
ul.MenuBarHorizontal {font-size:larger;}
}
ul.MenuBarHorizontal
{
    margin: 0;
    padding:0;
    background-color:#000;
    list-style-type: none;
    font-size: medium;

    cursor: default;
    width:100%;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
    margin:0;
    list-style-type: none;
    display:block;
/*  font-size: 100%;
    position: relative;
*/  text-align: center;
font-family:"Franklin Gothic Book";
    cursor: pointer;
/*  width: auto;
*/  float: left;
}

As you can see I used a Spry mennu from menu and tweaked it. Maybe I tweaked it wrong?

Thanks for yoru help and patience.

[Reliable]

I forgot an impoprtant piece of code #menubar {margin-left:16.5%}

[JorgeM]

Your site looks better from my mobile. Although the menu bar doesn't line up exactly under the big center pic.

[LastMitch]

Although the menu bar doesn't line up exactly under the big center pic.

I notice that too.

[LastMitch]

I took away certain thing for now because right now you menu is not line up.

Can you add margin:0px auto;:

In here:

ul.MenuBarHorizontal{
margin:0px auto;
background-color:#000;
width:100%;
}

and here too:

ul.MenuBarHorizontal li{
margin:0px auto;
display:block;
position: relative;
}

It should be center

[Reliable]

Yes, that's exactly my problem. The menu bar if fine on IE and Chrome, but not on mobile devices and Firefox. I actually don't want to center it as the CSS changes you provided will do unless that turns out to be the only viable solution and the client gives a thumbs up. My goal was to make it flush with the picture in every brwoser on every platform as it is in the browsers I mentioned.

[LastMitch]

Yes, that's exactly my problem. The menu bar if fine on IE and Chrome, but not on mobile devices and Firefox. I actually don't want to center it as the CSS changes you provided will do unless that turns out to be the only viable solution and the client gives a thumbs up.

I seen most mobile website have menu bar in the center.

The issue is that there's no code in your CSS that interfere with the design and browser.

You don't any HTML5 or CSS3 code.

So I'm curious why it's not appear correctly.

[Reliable]

Your guess is at lLEAST as good if not better than mine. :)

[LastMitch]

Your guess is at lLEAST as good if not better than mine. :)

Just take out everything except this:

ul.MenuBarHorizontal{
margin:0px auto;
width:100%;
}

and here too:

ul.MenuBarHorizontal li{
margin:0px auto;
}

and this too:

#menubar {margin-left:0}

Right now, there shouldn't be any thing blocking the menu bar if so they it has something to do with the image.

Do you have CSS that is linking the image?

[Reliable]

Before I read your response (thank you for your time, by the way) I made some font changes starting with my seemingly failed attempt at using @font-face for the first time. I went to at least three different sites trying to make the new CSS3 rule work in Firefox to no avail. I commented it out, made a few other font adjustments and voila. The menu bar on the other pages still renders different margin bottoms, but, right now at least, I'm chalking that up as a loss since I viewed in Adobe Browser labs an it looked in most of the browsers there. I'm using the latest versions of the top 5 browsers on XP SP3.

If anyone has further suggestions or can tell me how to get @font-face to work I welcome them. @font-face only seemed to work for me in Chrome. Lots fo people still don't know about Chrome not to mention use it so as a web designer/developer having something only work in Chrome does me no good.

[LastMitch]

Lots fo people still don't know about Chrome not to mention use it so as a web designer/developer having something only work in Chrome does me no good.

You need to test all browsers not just Chrome.

You have to remember there are some CSS3 code may not work on Firefox and IE.