Different output for IE and the rest

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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.