Formatear un elemento dentro de un

Tengo dos elementos li en mi página y quiero que se muestren uno encima del otro, pero no lo hacen. Aquí está mi código:

 #floating-box { width: 65px; height:auto; background-color: #484848; margin: 54px 10px 0px 623px; position:absolute; z-index:1; text-align: justify; border-top: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #484848; } .social { position : relative; list-style-type : none; margin-left: 2px; } .social li a { float: left; padding: 1px 5px 5px 0px; margin: 0px 0px 3px 0px; display: inline; } 

El HTML que utiliza este CSS es:

 

El botón Me gusta de Facebook aparece en la parte superior del botón de Twitter de Twitter, o a la derecha de este. Por alguna razón varía cada vez.

Cuando pruebo su código aquí @ csstest.com, los dos li se muestran bien uno encima del otro, al igual que los elementos li simples.

Y no veo nada en tu css que pueda afectar a cualquiera de los estilos de los elementos li .

¿No hay otro estilo css que los que nos dieron?

¿Qué navegador estás usando para probar?

Edit1:

si haces eso

 #floating-box { width: 65px; height:auto; background-color: #484848; margin: 54px 10px 0px 623px; position:absolute; z-index:1; text-align: justify; border-top: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #000; border-right: 1px solid #484848; } .social li { list-style-type : none; } 

aplicado a:

  

Agregué una A en el primer anclaje html, y luego verás que A está bien en la lista anterior.

¿Te ayuda?