Question

I’m working on a website, and it works perfectly in Chrome/Firefox, but I’m experiencing two issues in IE8 and 9.

1. In IE9, the navigation menu in the header doesn’t display.

2. In IE8, the entire header is screwed up. The title, subtitle, and navigation menu all appear above the main header image instead of on top of it. (Click here to see what it looks like).

I’m sure these are really simple fixes, I just couldn’t find them. Thanks in advance.

Edit for code. HTML:

    <div class="heightWrapper">
        <h1 class="birthofahero"><?php bloginfo( 'name' ); ?></h1>
        <h2 class="jennasue"><?php bloginfo( 'description' ); ?></h2>
        <img src="/resources/images/header.jpg" alt="StartLivingNow | Inspiring a Generation" />
        <nav class="topNavigationMenu">
            <ul>
                <li><a href="/" title="Home">Home</a></li>
                <li><a href="/about/">About</a></li>
                <li><a href="/blog/">Blog</a></li>
                <li><a href="/media/">Media</a></li>
                <li><a href="/newsletter/">Newsletter</a></li>
                <li><a href="/partnership/">Partnership</a></li>
                <li><a href="/contact/">Contact</a></li>
            </ul>
        </nav>
    </div>

CSS

.heightWrapper {
    height: 100%; /* To position the navbar at the bottom of the div */
    margin-bottom: -.4em; /* A magic number, for some reason. */
}
.topNavigationMenu {
    float: left;
    position: relative;
    bottom: 3.9em;
    margin-bottom: -3.9em;
    z-index: 100; /* test */
}
.topNavigationMenu li, .topNavigationMenu a {
    float: left;
}
.topNavigationMenu li a {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 2em;
    font-weight: bold;
    text-decoration: none;
    color: #004080;
    float: left;
    padding: .2em .4em;
}
.topNavigationMenu li a:hover, .topNavigationMenu li a:active {
    background-color: #004080;
    color: #fff;
}

Answer 1

Fix for navigation menu in IE9
Apply position:relative to your heightWrapper and
Apply position:absolute to .topNavigationMenu (You already have bottom: 0 set). You should also remove the float:left from .topNavigationMenu.

As for the IE8 issues, neither header nor nav are HTML 4 elements, and IE 8 doesn’t support HTML 5. Try including modernizer (http://modernizr.com/) in the head section of the page, or another HTML5 shiv. That should allow you to style them in IE7/8.