HTML интерпретация на Firefox

Question

этот код:

как в IE и 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>

но в Firefox это выглядит так:

<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>

ПОЧЕМУ? Кто-нибудь может увидеть какое-либо решение?

Answer 1

Как говорит Ян в комментарии - измените порядок <a> и <li> на этот:

<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>

Answer 2

Эй, я думаю, что ul может содержать только li (может быть, ul тоже), попробуйте что-то вроде этого:

<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>
    ...