lista de imagenes con float queda escalonada

[mayid]

Estoy haciendo una galeria de imagenes con listas desordenadas, de este estilo:
http://www.desarrolloweb.com/articul...as/index2.html

La segunda imagen queda escalonada respecto de la primera. Por que?

Este es mi css

Código CSS:

ul#listado_de_artistas li {
margin: 1px; 
border: 1px solid #ccc; 
width: 280px;
 display:inline; 
padding: 2px; float: left}
 

Este el html:

Código HTML:

<ul id="listado_de_artistas">
 
                    <li> 
 
            
            
 
            <img src="../perfiles/guil" alt='foto de perfil' class="miniatura_perfil" />    
 
            <a href="http://localhost/estudiodigital/galeria/3">guil guil</a>                   
 
            Nicaragua           </li>
 
            <br/>           
 
                    <li> 
 
                        
 
            
 
            <img src="../perfiles/fgh" alt='foto de perfil' class="miniatura_perfil" /> 
 
            <a href="http://localhost/estudiodigital/galeria/4">Guille fh</a>                   
 
            Paraguay            </li>
 
            <br/>           
 
                
 
        </ul>
 

[kseso?]

¿Podrías indicar en qué navegador y SO se presenta la escalera?
Visto en ff y chrome en vi$ta no hay tal.

Por cierto, y ya que entré al enlace, puedes evitar el teclear tanto |<br/>| ente imagen y span definiendo el span como elemento de bloque.
Alguna cosilla más, pero no he verificado posibles efectos secundarios, como el retirar el |inline| de los |li| (están flotados)

¿Has previsto qué ocurrirá si el texto descriptivo ocupa más de una línea?
Y ya acabo con las "pegas", supongo que las miniaturas de la galerías las editarás con el potochop de turno para hacerlas de las mismas medidas.

[mayid]

Perdon, me expresé mal. El link es a un tutorial de galeria de imagenes con listas desordenadas.

EDITADO: Gracias !!! Ese <br> se me había pasado por alto y era el que causaba el desorden!!!

[kseso?]

Mayid:
Mi comentario anterior era sobre los códigos del enlace.

Sobre el código que publica:
No se qué intentas lograr. Por un lado a los li los flota a la izquierda y los declara en línea. Supongo que para que queden adyacentes uno al lado del otro.
Pero por otro lados, en el html, entre cada li añade un retorno de carro (br) que lo fuerza a ir la línea inferior.

Debe aclarar cuál es la intención, si adyacentes en la horizontal o superpuestos en la vertical.

[mayid]

Me queda clarisimo. El problema era de html (que es generado desde php). Tenía un <br> que hacía escalonar los <li> flotantes...

Gracias otra vez por comentar!