Different output for IE and the rest

For some reason this class outputs ok in IE but in Firefox the words and the lines ( | ) are not centered:

.horz_list li{
    display: inline; 
    background-color: #CEE3F8; 
    border-right-style:thin; 
    padding-right: 4px; 
    padding-left: 4px;  
}

This is the page for the output:

<div id="top_nav">
                    <ul class="horz_list">
                        <li><a href="<?php echo APP_DIR.'index.php?action=newest'; ?>">Nuevas</a></li>
                        <li><a href="<?php echo APP_DIR.'index.php?action=comments&param=new'; ?>">Comentarios</a></li>
                        <li class="last"><a href="<?php echo APP_DIR.'index.php?action=submit'; ?>">Enviar</a></li>
                    </ul> <!-- ul.horz_list -->
                </div> <!-- top_nav -->

If anyone know why is this, thanks.

From stackoverflow

• Try changing the li's properties

  .horz_list li{
      display: block; /* block level */
      float: left;  /* float them inline to the left */
      overflow: hidden; /* this will force the div to stretch to it's contained element */
      background-color: #CEE3F8;  
      border-right-style:thin; 
      padding-right: 4px; 
      padding-left: 4px;  
  }
  

  ... or if you want what Ben described, the whole block centred, use

  .horz_list {
     margin: 0 auto;
  
  
  }
  

  Ensure it's containing block has a width, even if it's 100%.

• If you're trying to get your list items to be horizontally centered, this is accomplished differently in IE vs. other browsers. Try setting margin-left:auto;margin-right;auto on your <ul>:

  .horz_list {
      margin-left: auto;
      margin-right: auto;
  }
  

• Probably the reason for the extra spacing in Firefox is that if you set the LI as display:inline, the newline in your HTML code creates an extra space (just like if you type "lorem(newline)ipsum" the words may appear side to side in the page with a space between them).

  Try, for example, to stick the <LI> tags together like this <li>....</li><li>.... and I think this will remove the unwanted spaces.

  If you don't like to put it all into a single line, alex's suggestion works, but you may have to add a <div style="clear:both"></div> after the closing UL, because of floated elements.

  alex : You could also set the div's overflow: hidden to accomplish this without any unnecessary markup.