margen invisible??

[oniakai]

Hola ForosDelWeb!! soy nuevo en esto y tengo una dudilla que no sé resolver, seguramente es una tontería pero, no sé por que coj**** no me sale... :P

Tengo este codigo, por ejemplo:

Código HTML:

<ul>
  <li><a><img></a></li>
  <li><a><img></a></li>
</ul> 

quiero que los elementos <li> se muestren en un sola linea (display:inline) pero el resultado no es exactamente lo que yo espero, ya que entre elementos de la lista, aún mostrándolos en linea, me deja un par de píxeles de margen entre elementos que me gustaría que no dejara.. Lo analizo con FireBug y veo que el elemento <li> es ese par de píxeles más grande que la imagen (aunque a la imagen le he asignado el width y el height por css y le he puesto margin:0) no entiendo por que me deja más espacio del que le pido (que es 0). Alguien puede ayudarme?? muchas gracias!!!

[miktrv]

float: left?? margin 0 y padding 0??

Un saludo!

[oniakai]

margin y padding sí, pero... float:left??? para que si ya he puesto un inline??

[oniakai]

joder... le acabo de poner el float:left y perfecto!!! pero, por que???

[oniakai]

que cachondo es CSS ahora que se coloca bien el margen raro ese me sale otra cosa... acabo antes si os pongo el HTML y a ver si alguien me sabe decir que estoy haciendo mal...

Código HTML:

<div class="image-gallery">
<ul>
	<li>
		<ul class="row first">
			<li class="caption first">
				<a title="Caption 1-1" href="#">
				<img class="gallery" alt="Caption 1-1" src="elements/images/lastprints/lastprint_1-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 1-2" href="#">
				<img class="gallery" alt="Caption 1-2" src="elements/images/lastprints/lastprint_1-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 1-3" href="#">
				<img class="gallery" alt="Caption 1-3" src="elements/images/lastprints/lastprint_1-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 2-1" href="#">
				<img class="gallery" alt="Caption 2-1" src="elements/images/lastprints/lastprint_2-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 2-2" href="#">
				<img class="gallery" alt="Caption 2-2" src="elements/images/lastprints/lastprint_2-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 2-3" href="#">
				<img class="gallery" alt="Caption 2-3" src="elements/images/lastprints/lastprint_2-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 3-1" href="#">
				<img class="gallery" alt="Caption 3-1" src="elements/images/lastprints/lastprint_3-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 3-2" href="#">
				<img class="gallery" alt="Caption 3-2" src="elements/images/lastprints/lastprint_3-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 3-3" href="#">
				<img class="gallery" alt="Caption 3-3" src="elements/images/lastprints/lastprint_3-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 4-1" href="#">
				<img class="gallery" alt="Caption 4-1" src="elements/images/lastprints/lastprint_3-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 4-2" href="#">
				<img class="gallery" alt="Caption 4-2" src="elements/images/lastprints/lastprint_3-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 4-3" href="#">
				<img class="gallery" alt="Caption 4-3" src="elements/images/lastprints/lastprint_3-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 5-1" href="#">
				<img class="gallery" alt="Caption 5-1" src="elements/images/lastprints/lastprint_4-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 5-2" href="#">
				<img class="gallery" alt="Caption 5-2" src="elements/images/lastprints/lastprint_4-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 5-3" href="#">
				<img class="gallery" alt="Caption 5-3" src="elements/images/lastprints/lastprint_4-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row last">
			<li class="caption first">
				<a title="Caption 6-1" href="#">
				<img class="gallery" alt="Caption 6-1" src="elements/images/lastprints/lastprint_4-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 6-2" href="#">
				<img class="gallery" alt="Caption 6-2" src="elements/images/lastprints/lastprint_4-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 6-3" href="#">
				<img class="gallery" alt="Caption 6-3" src="elements/images/lastprints/lastprint_4-3.png">
				</a>
			</li>
		</ul>
	</li>
</ul>
</div> 

El efecto deseado es el de una matriz de imagenes 3x6 con 10px de separacion entre imagen y 10px de margen entre filas...

Gracias!!

Este es todo el css que tiene asociado cada clase/id

Código:

div#second div.image-gallery {
	margin-bottom: 30px;
}

div#second img.gallery {
	border-top: 1px solid #d8d8d8;
	width: 67px;
	height: 41px;
}

div#second ul.row li.caption,
div#links ul.links li {
	display: inline;
	float: left;
}

div#second ul.row {
	margin: 5px 0;
}

div#second ul.row li {
	margin: 0 6px;
}

div#second ul.row li.first {
	margin: 0 6px 0 0;
}

div#second ul.row li.last {
	margin: 0 0 0 6px;
}

div#second ul.first {
	margin: 0 0 5px 0;
}

div#second ul.last {
	margin: 5px 0 0 0;
}

o si alguien me aconseja una manera mejor de conseguir una matriz de imagenes.. como os dije soy novatillo... :P

[oniakai]

Ya sé que nadie me está haciendo demasiado caso, pero yo a lo mio...

Al final he hecho 3divs (columnas) y una <ul> dentro de cada div con seis <li> dentro. float left a la primera y a la del centro, y float right a la de la derecha. Y margenes entre columnas funcionando bien, el problema lo tengo ahora con los margenes superior e inferior entre cada li, ¡me los superpone! si le doy margin:5px 0; a cada <li> para que me haga 10px de separacion entre elementos solo me deja 5px y no sé por que, alguna idea??

PD no se si tiene algo que ver pero dentro de cada <li> hay una <a> y dentro una <img> con su width y height especificados...

GRACIAS comunidad!!!