title: inline-block not rendering UL Li element horizontally
body: <p>Within an html file I have a menu set up as: </p>
  
  <pre><code>    &lt;div id="informheader" class="topmenu"&gt;
  &lt;ul id="navigationMenu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Reporting&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Management Console&lt;/a&gt;&lt;/li&gt;    
              &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Within the CSS</p>
  
  <pre><code>    .topmenu ul a
  {
      line-height:36px;
      text-decoration: none;
      color: #ffffff;
      display:inline-block;
      padding: 0px 5px 0px 5px;
      background-position: 100%;
  }
  
  .topmenu li a:hover
  {
      background-image: url('../images/gradientheaderdark.png');
      height: 36px;
      display: inline-block;
      text-decoration: none;
      background-repeat: repeat-x;
      margin-top:-5px;
      line-height:36px;
  }
  
  .topmenu
  {
      position: relative;
      display: block;
      width: 80%;
      height: 36px;
      margin: 5px auto;
      text-align: left;
      z-index: 9998;
      -khtml-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      -khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
      -ms-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
      -o-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
      -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
      -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
      box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
      background-image: url('../images/gradientheader.png');
      background-repeat: repeat-x;
  }
  
  .topmenu ul
  {
      display:inline-block;
      list-style-type: none;
      padding: 0;
      margin: auto 0;
  }
  
  .topmenu li
  {
      display: inline-block;
      list-style:none;
      padding: 0px 5px 0px 5px;
  }
  </code></pre>
  
  <p>The result renders the bullet-ed list horizontally in IE fine. However in Firefox the list stays vertical. Can anyone point me in the correct direction as to what tag I am missing to get Firefox to also render this UL list horizontally in Firefox (as well as safari)?
  Switching the display to block vs inline-block flips the issue for IE.</p>