Can't figure out why the page looks horrible in Firefox? Looks good in Chrome/IE

Question

This is a page I've been working on for quite some time and I can't figure out why the index page looks so bad in Firefox. All the other pages seem to be just fine. I just finished the simulation page and programmed the whole javascript file but I am so bad at HTML. Please note I started with a template (lots of changes since then). Can anyone guide me in the right direction please?

The page: www.fsaesim.com/index.html .

Am I missing something in the styles?

EDIT: Note how bad the front pic looks, the icons for the top menu bar don't appear and it just looks lopsided. Open in IE/Chrome and then in Firefox to see the fail.

Answer 1

The problem is that you've styled your ul#menu with a float:right. Because of this, in Firefox, the sibling div shares the same behaviour. Specify an explicit float:left to avoid this.

   <nav>
      <ul id="menu">
    ...
      </ul>
      <div align="center" style="overflow: hidden; width: 940px; height: 450px; float: left;">
            ...
      </div>
  </nav>

Answer 2

Take the div that is holding your "mainpic.jpg" and move it below your "nav" block. You may need to add a clear:both css style on the div I mentioned before.

Answer 3

It's a very simple fix actually. Adding <div style="clear:both"></div> in between your ul nav and the image div cleared the right float you set in the navigation menu and then aligns the image to the center. Tested it out in firebug and it works fine.

Answer 4

Try moving the image div to the outside of the nav container like this:

<header>
    <div class="wrapper">
        <h1><a href="index.html" id="logo">Progress Business Company</a></h1>
    <nav>
            <ul id="menu">
                <li id="nav1" class="active"><a href="index.html">Home<span>Page</span></a></li>
        <li id="nav2"><a href="news.html">News<span>Updates</span></a></li>
            <li id="nav3"><a href="documentation.html">Available<span>Features</span></a></li>
        <li id="nav4"><a href="simulation.html">Run<span>Simulation</span></a></li>
        <li id="nav5"><a href="contact.html">Contact<span>Support</span></a></li>
            </ul>
    </nav>
    </div>
    <div style="overflow: hidden; width: 940px; height: 450px;" align="center">
        <div style="margin-top: 50px; background-color: White; height: 500px;" align="center">
            <img src="images/mainpic3.jpg" alt="" />
        </div>
    </div>
</header>