HTML interpretation on firefox

this code:

is as it is on IE and chrome:

<ul id="icons" class="ui-widget ui-helper-clearfix">

  <a href="javascript:void(0)" onclick="play();">
    <li class="ui-state-default ui-corner-all" ><span id="play" class="ui-icon"></span></li></a>

  <a href="javascript:void(0)" title="next" onclick="nextVideo();">
    <li class="ui-state-default ui-corner-all" title="next"><span class="ui-icon ui-icon-seek-next"></span></li></a>

  <a href="javascript:void(0)" onclick="volume();">
    <li class="ui-state-default ui-corner-all"><span id="volume" class="ui-icon"></span></li></a>

</ul>

but on firefox it becomes like this:

<ul id=开发者_开发百科"icons" class="ui-widget ui-helper-clearfix">

  <a href="javascript:void(0)" onclick="play();"></a>
    <li class="ui-state-default ui-corner-all" ><span id="play" class="ui-icon"></span></li>
  <a href="javascript:void(0)" onclick="play();"></a>

.
.
.

</ul>

WHY? Can anyone see any solution?

As Jan says in the comment - change the order of the <a> and <li> to this:

<ul id="icons" class="ui-widget ui-helper-clearfix">

  <li class="ui-state-default ui-corner-all" >
    <a href="javascript:void(0)" onclick="play();">
      <span id="play" class="ui-icon"></span></a></li>

  <li class="ui-state-default ui-corner-all" title="next">
    <a href="javascript:void(0)" title="next" onclick="nextVideo();">
      <span class="ui-icon ui-icon-seek-next"></span></a></li>

  <li class="ui-state-default ui-corner-all">
    <a href="javascript:void(0)" onclick="volume();">
      <span id="volume" class="ui-icon"></span></a></li>

</ul>

Hey, i think ul can only contain li (maybe ul also), try something like this :

<ul id="icons" class="ui-widget ui-helper-clearfix">


    <li class="ui-state-default ui-corner-all" >
       <a href="javascript:void(0)" onclick="play();">
           <span id="play" class="ui-icon"></span>
       </a>
    </li>
    ...