Question

If I have a structure like this:

<div class="header">
    <div class="logo">[logo]</div>
    <div id="navigation" class="cf">
        <nav>
            <ul>
                <li><a href="#">This is a link</a></li>
                <li class="active"><a href="#">Active Tab</a></li>
                <li><a href="#">Lorem link</a></li>
                <li><a href="#">Dolor link two</a></li>
                <li><a href="#">Here is a link</a></li>
            </ul>
        </nav>
    </div>
</div>

If I style just the <div id="navigation" class="cf"> will that display correctly on IE<9 or will having a nav element mess up the rendering?

Answer 1

You will need to use an html5shiv in order to have the nav element inserted into the DOM. Also, nav as a block element. Therefore, you will need to explicitly add nav { display: block; } in your CSS.