I am building a UL based navigation for SharePoint and came across an interesting issue with Safari and Chrome.  My nav looks something like this:

<div id=”navcontainer”>
    <ul id=’navigation’>
        <li class=’nav_sites0′><a href=”><span>Groups1</span></a>
            <div class=’menufooter’/>
        </li>
        <li class=’nav_sites1′><a href=”><span>Groups2</span></a></li>
    </ul>
<div>

For some reason nav_sites1 becomes a child of menufooter, rather than a sibling of nav_sites0.   After some fiddling, I changed:

<div class=’menufooter’/>

to:

<div class=’menufooter’></div>

and everything works fine.   IE7/8 and Firefox seem to be a little more forgiving with DIVs than Safari and Chrome.

A colleague told me that the <element/> notation has been deprecated, but I can’t find anything on this.