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