CSS horizontale Liste nicht gezeigt horizontal in Firefox auf Chrom

Question

Hallo, ich versuche, eine Symbolleiste mit ul und li Elemente zu erstellen, funktioniert alles gut auf IE8, aber wenn ich die Seite in Google Chrome o Firefox.com die Elemente nicht in anzeigen horizontaler Weg. Hier ist die CSS, die ich für die Symbolleiste verwende.

div.Toolbar 
{ 
    padding: 4px; 
} 

div.Toolbar ul 
{ 
    list-style: none; 
    margin: 0px; 
    padding: 0px 10px 0px 0px; 
    width: 100%; 
} 

div.Toolbar ul li a, div.leftMenu ul li a:visited 
{ 
    border: 1px solid #f0f5f8; 
    display: block; 
    line-height: 1.35em; 
    padding: 5px 5px; 
    text-decoration: none; 
    white-space: nowrap; 
    float: left; 
} 

div.Toolbar ul li a:hover 
{ 
    background-color: #FFFF99; 
    border: 1px solid #FFCC00; 
    text-decoration: none; 
    padding-right: 5px; 
    float: left; 
} 

div.Toolbar ul li a:active 
{ 
    border: 1px solid #f0f5f8; 
    text-decoration: none; 
    float: left; 
} 


<div class="Toolbar"> 
    <ul> 
     <li> 
      <asp:LinkButton ID="lnkNuevaOrden" runat="server" Visible="False"> 
       <img runat="server" id="img12" border="0" src="~/images/icons/action_add.gif" /> 
       Nuevo Registro 
      </asp:LinkButton> 
     </li> 

     <li> 
      <asp:LinkButton ID="lnkCambiarContrasena" runat="server" Visible="False" CausesValidation="False"> 
       <img runat="server" id="img11" src="~/images/icons/login.gif" border="0" /> 
       Cambiar Contraseña 
      </asp:LinkButton> 
     </li> 

    </ul> 
    <br /> 
</div> 

Answer 1

Sie möchten Ihre li Elemente haben, schweben, nicht die a Elemente.

Original (tatsächlich wie erwartet funktioniert auf Firefox und Chrome für mich): http://jsfiddle.net/56ESk/ Neu: http://jsfiddle.net/56ESk/1/

Sie können auch bereits berücksichtigt Erklärungen in Ihrer :hover

div.Toolbar 
{ 
    padding: 4px; 
} 

div.Toolbar ul 
{ 
    list-style: none; 
    margin: 0px; 
    padding: 0px 10px 0px 0px; 
    width: 100%; 
} 

div.Toolbar ul li 
{ 
    display: block; 
    float: left; 
} 

div.Toolbar ul li a, div.leftMenu ul li a:visited 
{ 
    border: 1px solid #f0f5f8; 
    display: block; 
    line-height: 1.35em; 
    padding: 5px 5px; 
    text-decoration: none; 
    white-space: nowrap; 
    /* float: left; */ 
} 

div.Toolbar ul li a:hover 
{ 
    background-color: #FFFF99; 
    border: 1px solid #FFCC00; 
} 

Answer 2

div.Toolbar ul li 
{ 
list-style-type: none; 
display: inline; 
}