Alguien sabe por qué se me desplazan los <li> estos?

[Bam_Margera]

hola!

si quieren mirar aqui http://keepyourlinks.byethost32.com/...tarenlaces.php veran que en la lista, el siguiente elemento sale unos X píxeles más a la derecha que el anterior, hasta que desborda y vuelve a empezar.

he probado quitar las imágenes, y se muestra correctamente; es decir, todos alineado a la izquierda. Pero en la propiedad de img o li no hay padding alguno, lo pueden ver en: http://keepyourlinks.byethost32.com/metal/style.css

Alguna idea?

gracias!

[Triby]

Ya que estas declarando un doctype, seria conveniente apegarte a los estandares que seleccionaste. Intenta validar el codigo antes de proseguir.

Una linea con muchos errores:

Código html:

<h4>2 Results in all categories</h4><hr/> <br><ul style='list-style:none;'><div id="link0"><li><img src="http://www.forosdelweb.com/f53/images/linket.png" alt="link" width="20" height="20" /> <a href="javascript:llamarasincrono('php/link.php?id=91','link0','GET')";>Hattrick</a></div></li><div id="link1"><li><img src="http://www.forosdelweb.com/f53/images/linket.png" alt="link" width="20" height="20" /> <a href="javascript:llamarasincrono('php/link.php?id=93','link1','GET')";>Hard-H2o</a></div></li></ul>          <div id="newlink" style="padding-left:10%;""><img src="http://www.forosdelweb.com/f53/images/add.png" alt="add" width="10" height="10" style="text-decoration:none;" /> <a href="javascript:llamarasincrono('./php/formlink.php', 'newlink','GET');"> New link</a></div>
                  </div>
 

Validador xHTML: http://validator.w3.org/

[kseso?]

Hola Ban
Tienes un error en cómo conformas las listas.
Todo lo contenido en una lista <ul> debe estar contenido en sus respectivos <li> y son estos los que pueden alojar imágenes, divs, p, etc.

Sin embargo tú tienes otros elementos distintos a los li como hijos directos de ul
Correcto:

<ul>
<li>
<div>...... </div>
</li>
<li> más cosas</li>
</ul>

Mal:

<ul>
<div> ...</div>
<li>... </li>
</ul>

Corrige eso y después ya veremos.
Un saludo

Aventuro una hipótesis: puede ser que se estén sumando (herencia) los padding || margin laterales.

[Bam_Margera]

hola,

muchas gracias por vuestros posts!

he metido todo el elemento dentro del <li>

la linea es complicada, pues la genero con PHP...

para que veais lo que digo de las imagenes,

con (sale mal):
http://keepyourlinks.byethost32.com/...aces.php?all=1
sin (sale 'bien'):
http://keepyourlinks.byethost32.com/...tarenlaces.php


yo no lo entiendo... :S

[Triby]

La imagen es mas grande que la altura de linea (line-height) y por eso hace que todo se recorra. Reduce la imagen o aumenta el tamaño de linea para cada li.

[Mikmoro]

Creo que deberías eliminar el float left de #rightcontent_section img. De todas maneras, es mucho mejor que pongas la imagen de fondo de los enlaces o de una clse que des a esos enlaces y les des un padding-left para mostrarla. Es infinitamente más económico en cófigo que incrustar la imagen cien veces.