Internet Explorer CSS Header Issues

Question

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

In IE9, the navigation menu in the header doesn't display.
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;
}

Mind posting CSS and HTML of your header? Any JavaScript involved with these? — Leeish, Feb 10 '13 at 05:45
Why not get the HTML to be valid - i.e. correct errors http://validator.w3.org/check?uri=http%3A%2F%2Fstartlivingnow.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 — Ed Heal, Feb 10 '13 at 05:49
I appreciate the link, but none of my validator errors are in my header. — lincarnate, Feb 10 '13 at 05:58
@lincarnate - Just because they are not in the header, IE has a habit of remembering them and trying its best to figure out what was meant. This can sometimes back up to unexpected places. It is best to fix the errors. — Ed Heal, Feb 10 '13 at 06:07

score 0 · Answer 1 · answered Feb 10 '13 at 05:52

0

IE8

The reason is your layout. In your layout, there are 3 things:

h1

h2

menu

Now for the h's, you have used fonts not present in browers, or computers using @font-face. Internet Explorer doesn't support many CSS3 commands such as @font-face, causing your menu to be on the top.

The Solution:

Make the whole header a image and then put the menu.

IE9

I don't know but most probably the same. And don't forget about checking errors.

answered Feb 10 '13 at 05:52

Ishpreet

171
1
3
13

Please do not make the menu as an image - there are people that are visually impaired and use screen readers. Also will not help search engines to index your site. – Ed Heal Feb 10 '13 at 05:55
That's true. But I think you should stick with what you are doing and alert to use google chrome, firefox or safari in javascript if the browser is IE: var browserName=navigator.appName; if (browserName=="Microsoft Internet Explorer") { alert("To view the website proprly, use a modern browser like Google Chrome, Safari, Mozilla Firefox and Opera. To download Chrome for, go to - http://www.google.com/ and download Chrome."); } Not many people use IE – Ishpreet Feb 10 '13 at 05:59
IE8 and 9 have support for @font-face (http://caniuse.com/#search=font-face) and the fonts are rendering correctly on my test machine. They're just not in the correct place. – lincarnate Feb 10 '13 at 06:01
You may also tell it to put it to the bottom: http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom-with-css position: absolute; bottom: 0; – Ishpreet Feb 10 '13 at 06:04

Robert McKee · Accepted Answer · 2013-02-10T06:07:35.500

0

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.

edited Feb 10 '13 at 06:07

answered Feb 10 '13 at 05:58

Robert McKee

20,124
1
35
53

I guess you could also change the
and
tags to
if you don't want to use modernizr or a html5 shiv, but it's pretty painless to just include it. Or copy the header/nav styles from your styles.css to using the class names instead, that might also work.
– Robert McKee Feb 10 '13 at 06:10
Those fixed all my issues! Thank you so much! – lincarnate Feb 10 '13 at 06:15

Internet Explorer CSS Header Issues

2 Answers2

IE8

The Solution:

IE9