Celdas de tabla a 24px imagenes a 24px no caben

[astut]

Hola, digamos que tengo una tabla compuesta de varias celdas con width de 24px y height de 24px definidos en el atributo style.


Si aqui dentro meto imagenes del mismo tamaño... las celdas se agrandan..
¿Porque?

Incluso metiendo imagenes de 20 por 20 se sigen agrandando las celdas y no quiero que ocurra esto ya que las celdas tienen un fondo y ese sale mal..

¿Como lo soluciono?

Gracias!

[David]

Será más fácil ayudarte si nos muestras el código de la tabla o un enlace a la página.

Saludos.

[kseso?]

Hasta tu regreso con el código como te sugiere David antes "EL GRANDE", me pregunto si estás utilizando la propiedad table-layout="fixed" además de la anchura de las celdas.

Para una explicación algo mayor mira este tema

Un saludo

[astut]

Código HTML:

<table class="mapa" cellpadding="0" cellspacing="0">
<tr>
<td><img src="imagen.gif"/>
</td>
</tr>
</table> 

css:

Código HTML:

table.mapa td
{
	text-align: center;
	vertical-align: center;
	width: 24px;
	height: 24px;
}
table.mapa td img
{
	width: 20px;
	height: 20px;
}

Hay lo tienes

Gracias

[kseso?]

Hola Astud

Sin ver el resto de la página, no puedo imaginar por qué utilizas tablas para ello.
Así que me aventuro a colocarte un par de presentaciones de imágenes de forma uniformes sin importar el tamaño de las mismas, claro, sin tablas:
Una: sólo las imágenes
Dos: añadiendo un título y un pie de imagen

De todas formas, asegúrate que no están influyendo otras propiedades. Para ello viene muy bien Firefox con firebug: podrás ver todas las propiedades que se le aplican a un elemento.

Un saludo

[astut]

Hola kseo gracias por responder.

Defino el ancho y alto de la table, todas las celdas tienen el mismo tamaño... la imagen que meto dentro debe ser mas pequeña que la celda para que encaje no se porque.

He probado con table layout y lo otro que me has dicho y nada.

Es un editor de mapas para un juego por web online lo que estoy desarrollando, cosa que puedes ver aqui:
http://www.forosdelweb.com/f1/http-w...6/#post2719951
por eso utilizo tablas.

A ver si hay alguna solucion, gracias!

EDIT: en iexplore la imagen no se sale... ocurre en firefox y en opera ¿Qe puedo hacer?

[astut]

Este es el css que uso:

Código HTML:

table.mapa
{
	overflow: hidden;
	table-layout: fixed;
	width: 768px;
	height: 480px;
	margin: 0 auto; 
	border: 1px solid #999999;
}
table.mapa td
{
	text-align: center;
	vertical-align: center;
	width: 24px;
	height: 24px;
}
table.mapa td img
{
	width: 24px;
	height: 24px;
}

Y sige dando el problema, una imagen:


Como veis, donde esta el muñequito, pues la imagen parece que mida mas 24px por 24px y se fastidia todo... es como si las css no se aplicaran, en cambio en iexplore va de maravilla.

[Zapiko]

A ver, puede que firefox se arme un lio si le defines dos veces las dimensiones de las celdas, si te fijas en el CSS estas diciendole primero que son de 24px y luego son d 20px...echale un vistazo...

[astut]

A ver, puede que firefox se arme un lio si le defines dos veces las dimensiones de las celdas, si te fijas en el CSS estas diciendole primero que son de 24px y luego son d 20px...echale un vistazo...

?

Le defino que son 24 px nada mas no se que estas diciendo

Ayuda por favor.

[Zapiko]

table.mapa td
{
text-align: center;
vertical-align: center;
width: 24px;
height: 24px;
}
table.mapa td img
{
width: 24px;
height: 24px;
}

fijate que en las dos defines la etiqueta <td> ...entonces les das dos valores, en la primera 20 y en la segunda 24

[kseso?]

No Zapiko, la primera define la propiedades de las celdas de las tablas que tengan definida su clase como 'mapa', a continuación son ´para las imágenes que estén dentro de una celda cuya tabla tenga aplicada la clase 'mapa'.

Astut, si no tienes reseteado tu css, añade al inicio (lo primero de todo) de tu hoja de estilos:

* {margin:0;padding:0; border:0; outline:none; position: relative;}

Porque lo único que se me ocurre es que se estén aplicando algún margen o padding

¿no tienes la página en línea? Pon un enlace a la página donde está el problema.

Un saludo

[Zapiko]

ok pos lo siento....:S

[astut]

No Zapiko, la primera define la propiedades de las celdas de las tablas que tengan definida su clase como 'mapa', a continuación son ´para las imágenes que estén dentro de una celda cuya tabla tenga aplicada la clase 'mapa'.

Astut, si no tienes reseteado tu css, añade al inicio (lo primero de todo) de tu hoja de estilos:
Cita:
* {margin:0;padding:0; border:0; outline:none; position: relative;}
Porque lo único que se me ocurre es que se estén aplicando algún margen o padding

¿no tienes la página en línea? Pon un enlace a la página donde está el problema.

Un saludo

Hago lo que me dices pero nada, sige igual, incluso quitando todas las css y solo dejando el mapa sige dando el mismo error..

La pagina no esta en linea no dispongo de servidor, estoy pensand oen lanzar el proyecto el mes que biene con un VPS para empezar pero si sigo con este problema lo dudo

Gracias por la ayuda pero sige igual

[Triby]

Probaste ya con overflow:hidden;?

Tambien ten en cuenta que debes crear cada celda sin espacios entre etiquetas:

Aumenta el tamaño:
<td> <img ... /> </td>
<td><img ... /> </td>

No aumenta el tamaño
<td><img ... /></td>

[astut]

Probaste ya con overflow:hidden;?

Tambien ten en cuenta que debes crear cada celda sin espacios entre etiquetas:

Aumenta el tamaño:
<td> <img ... /> </td>
<td><img ... /> </td>

No aumenta el tamaño
<td><img ... /></td>

Hola trybi, nada de nada, ni con overflow ni con layout table ni de ninguna forma, solo ocurre con firefox y no encuentro nada que este mal...

A ver si alguien tiene una respuesta.

[deirdre]

Hola astut

Sigo este problema con cierta perplejidad y como no acabo de entenderlo bien recojo tu código (de tu post num. 4) y contruyo un html completo para hacer pruebas.

La imagen de 20x20 px (ficticia) es un cuadrado verde de esa medida para hacer pruebas.

He hecho pruebas en 9 navegadores y las he capturado en imágenes.

Todo esto está subido a:

http://www.box.net/shared/18i6gi2s5e

Sobre esta base, puedes decirnos dónde está el problema (o es que, quizás, la causa del problema está en otra parte de tu código que no conocemos).

Comenta algo.

Bye

[astut]

Muchas gracias deirdre por lo que has hecho de verdad estoy muy agradecido, pero... he dejado el mapa de mi web sin css, solo con los 24px por 24px de cada celda y aun asi sige dando el problema..

¿Tal vez sea jequery o xajax que utilizo?

De verdad muchas gracias!

[kseso?]

Hola Astut.

Después de andar dándole alguna vuelta al tema de las tablas (que reconozco mi desconocimiento de ellas), te comparto lo siguiente, tomando como base el código:

Código html:

<body>
        <table width="60" border="0" cellspacing="0" cellpadding="0" height="60">
            <tr height="20">
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
            </tr>
            <tr height="20">
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
            </tr>
            <tr height="20">
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
                <td width="20" height="20"><img src="imagen.gif" alt="" height="20" width="20" align="middle" border="0"></td>
            </tr>
        </table>
    </body>
 

Deliberadamente descabezado

Pues lo que he podido observar es que el espacio aparece en función del doctype.
Si el documento comienza por:

Código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 

no surgen espacios en blanco.
Si el doctype es

Código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 

ya tenemos espacio entre las filas, y la única forma que he hallado de eliminarlo es añadiendo el estilo:

Código css:

tr {float: left; clear:both;}
 

conjuntamente con este último doctype.

Intentaré alguna cosilla más y te cuento.

Un saludo.

Edito:
No tomar en cuenta los errores tales como no cerrar los tags, los estilos en el cuerpo, etc. Son pruebas.

[kseso?]

Retornemos al tema con el "XHTML 1.0 Strict", todos los estilos en la cabeza y sin errores en los códigos. Y lo que es más importante, sin la separación que tanta guerra ha dado a Astut

Código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
    <head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
body {
  padding: 20px;
  background: #000;
  }
table, tr, td {
  table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    background:#cdcdcd;
    overflow: hidden;
}
table {width:60px;} /*para ie7, sin ella ocupa el 100% del body*/
tr {height:20px; float: left; clear:both;}
td {text-align: center;}
td img {
  height:20px;
  width:20px;}
</style>
    </head>
    <body>
        <table cellpadding="0">
            <tr>
                <td><img src="imagen.gif" alt="" /></td>
                <td><img src="imagen.gif" alt="" /></td>
                <td><img src="imagen.gif" alt="" /></td>
            </tr>
            <tr>
                <td><img src="imagen.gif" alt="" /></td>
                <td><img src="imagen.gif" alt="" /></td>
                <td><img src="imagen.gif" alt="" /></td>
            </tr>
            <tr>
                <td><img src="imagen.gif" alt="" /></td>
                <td><img src="imagen.gif" alt="" /></td>
                <td><img src="imagen.gif" alt="" /></td>
            </tr>
        </table>
    </body>
</html>
 

No estoy muy seguro de lo ortodoxo que habré sido en el uso de alguna propiedad en algún elemento (especialmente el "float: left; clear:both;" de las filas), pero... es efectivo
Espero que puedas adaptarlo a tu proyecto.

Un saludo.

P.D.: la imagen es el cuadrado verde utilizado por Deirdre en el #16.

[astut]

Quiero agradecer la cooperacion de todos en este mi problema, sobre todo a kseso y Zapiko que se lo han currado.

Sobre el problema, ¿Que es? ¿un fallo de firefox?, no es un problema que sea vea mucho porque supongo que no todo el mundo desarrolla un juego web donde se muestre un mapa explorable con celdas, pero bueno hay esta.

Gracias a todos por ayudar ya esta solucionado mi problema y el de futuras personas que si usan el buscador lo encontraran!

Poco a poco va quedando menos para que pueda lanzar mi juego web.

Saludos a todos!

[Zapiko]

Joder..(perdon por la expresion xD) no me esperaba que me agradecieses nada Astut sobre todo cuando no pude ayudarte a resolverlo y cuando estaba equivocado....pero muchas gracias, se agradece un monton ;)