Columna de imagenes desalineada...

[Freeddie]

Buenas, tengo un problemilla con esta página que estoy haciendo. Basicamente es, como podéis comprobar, que algunas de las portadas de la columna del centro, salen un poco desalineadas del resto, ya sea a la izquierda o a la derecha, aunque no se nota mucho en Firefox, en IE sí se nota bastante.

El código html de la tabla es el siguiente:

Código:

<table class="ordenar" width="560" border="0" cellpadding="3" cellspacing="0">
<tr>
	<td width="150"></td>
    <td width="120"></td>
    <td width="150"></td>
    <td width="50"></td>
    <td width="70"></td>
</tr>

Y el css es el siguiente

Código:

.ordenar {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
}

A ver si alguno me puede echar un cable pq no se exactamente como cambiarlo para que se quede totalmente recto.

[hades87]

y si miras de aplicarle una clase a todas las imágenes, aún que yo en FF e IE lo veo bien.

Además te diría que no uses tablas para diseñar, es lo peor que se puede ahcer, por que hace tu código lioso, poco legible y no es amigable con los buscadores, aprende CSS y el sistema de divs.

[Freeddie]

Si te fijas bien, en algunas de las imagenes de la columna central está un pixel desalineadas a la izquierda o a la derecha, en FF casi no se nota. Hay que fijarse mucho, por ejemplo, el disco de Alice Cooper y justo el de debajo, las dos portadas no están perfectamente alineadas verticalmente.

Respecto a diseñar con divs... el problema es que yo no hice el diseño de la web, ya me lo pasaron así y basicamente estoy remendando y ordenando cosillas. Si cuando termine todo puedo hacer una V2 a base de divs, pues lo haré, pero hasta ese momento, tengo ke tirar de tablas.

[hades87]

Ok, entonces nada. Las imágenes son todas del mismo tamaño? o cada una tiene una anchura diferente? por que si es así te quedarán un poco movidas.

[Freeddie]

A ver, el código completo es este:

Código:

<table class="ordenar" width="560" border="0" cellpadding="3" cellspacing="0">
<tr>
	<td width="150"></td>
    <td width="120"></td>
    <td width="150"></td>
    <td width="50"></td>
    <td width="70"></td>
</tr>
<?php
$id=$datos['id'];
?>
	
      <tr class="menu">
              <td><?php echo $datos['grupo']; ?></td>
              <td><img src="../files/<? echo $datos['portada'] ?>"  width="120" height="120" border="0" /></td>
              <?php echo "<td><a href='reviewsv2.php?id=".$id."'>".$datos['album'] ."</a></td>";?>
              <td><?php echo $datos['rate'] ?></td>
              <td><?php echo $datos['fecha']; ?></td>
      </tr>
</table>
<? } ?>

Todas las portadas estás redimensionadas de la original a 120x120. Las originales se encuentran en la review del disco, a las que se pueden acceder a traves del nombre del cd en cuestión.

[hades87]

Pues acabo de medirlas y he visto que todas encaja, de todas formas no podrías ahcer una clase para ellas?

[Freeddie]

Mmmm, he estado probando con varias diferentes y ninguna da resultado (vertical-align, float, height, width, min/max... lo que sea, position...)

¿Alguna idea?

[hades87]

Pues ya no se que hacer, no tendrán algunas un borde o algo y por eso quedan "descentradas"?

[Freeddie]

No tendría nada que ver, aunque las imagenes tuvieran un borde serían redimensionadas igualmente a 120x120. Si te refieres a un borde mediante html, nop, no tienen ninguno.

Pues será un misterio, pq yo estoy sin ideas también.

[kseso?]

Prueba a modificar el texto que tienes a la derecha de la imagen. Verás el movimiento de la carátula.
¿Por qué? no lo he investigado, anda algo liado con tantas tablas y estilos genéricos el código que has heredado.

Un saludo

[Freeddie]

No tiene ningún sentido... ya haga el texto más grande, más pequeño, modifique el width de la tabla o de las columnas, cambie las clases de cualquiera de los elementos que puedan modificar la tabla... las imagenes siguen haciendo lo mismo, y asistemáticamente. O sea, en una pagina es la sexta, la octava, y decimotercera, y en la siguiente página es la cuarta, la novena y decimoprimera siendo el mismo código.

[Mikmoro]

Si coges cualquiera de tus tablas y le pones un borde (border="1"), verás lo que ocurre: si una tabla no tiene el tamaño fijado, aunque indiques el ancho de cada celda, éstas se irán adaptando al contenido, por lo que a mayor o menor texto en la primera celda, por ejemplo, ésta va creciendo y por tanto recortando el tamaño de las demás.

Prueba a ponerle a esa tabla table-layout="fixed" y se resolverá, porque impide que la tabla se redibuje adaptándose automáticamente al tamaño del contenido.

Podrías añadirlo de forma genérica a la clase .ordenar

[Freeddie]

¡Gracias Mikmoro!. Era eso, le he añadido table-layout="fixed" de forma genérica a la clase .ordenar y resuelto!.