Problems in IE7 with li tags nested in nav tag

Question

It seems very trendy these days to us <li> tags for navigation purposes without nesting them inside a <ul> or <ol>. But I have been having rendering problems in IE7 and below (no surprise there) when nesting the <li> tag directly inside an HTML5 <nav> tag.

The following example does some funny things:

<nav class="nav1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<nav class="nav2">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</nav>

Demo of code above including CSS

Using IETester and the debugging tool, if you analyse the DOM you will see that it looks like IE duplicates some <li> tags and tries to pull them together, even though they are separated by a <p> tag.

This yields strange results (visually) when you have multiple <nav> <li> combos throughout your page.

Has anybody else experienced this and can they provide a solution to fix it? Am I going to have to include a <ul> tag and risk looking untrendy? :)

Answer 1

Even by HTML5 rules, an li element is allowed only as a child of ul, ol, or menu. All bets are off if you violate this, and it’s pointless to do so. So just stop doing so and wrap li elements inside ul (which you can wrap inside nav if you like, but there is no tangible gain from that).