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: http://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

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>