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? :)
