Celdas de tabla más grandes de lo que deberían ser

Question

He creado un sistema de mapas para un juego que se basa en el principio de dibujar la imagen del mapa a partir de mosaicos.Hay muchas razones para esto que no entraré en detalles aquí, pero si realmente quieres saberlas, estoy seguro de que puedes averiguar cómo contactarme;)

Tengo hizo la última versión en vivo para que pueda ver exactamente dónde radica el problema y su origen.El problema es la línea entre los 2 mosaicos superiores y los 2 mosaicos inferiores. No puedo entender por qué fue así y agradecería cualquier ayuda.

En la fuente hay un marcador llamado "stackoverflow". Si busca "stackoverflow" cuando ve la fuente, debería llevarlo a la tabla en cuestión.

También he subido un imagen del tema.

Answer 1

creo que necesitas usar display: block en tus imágenes.Cuando las imágenes son inline hay un poco de espacio extra para el interlineado.

Answer 2

También puedes ajustar la altura de la línea del elemento td:

td {
    line-height: 0
}

Answer 3

Sé que esto puede sonar mal, pero debes asegurarte de que no haya espacios en blanco entre ese extremo. <img> etiqueta y el comienzo del fin </td> etiqueta.

es decir.Lo siguiente presentará el problema:

<td>
 <img src="image.jpg"/>
</td>

Y esto no:

<td><img src="image.jpg"/></td>

Espero que ayude.

Editar:OK, esa no fue la solución en absoluto.¡eh!

Answer 4

No he buscado todo, pero el problema está en algún lugar de las hojas de estilo.

Si copia solo la parte de la tabla, el mapa se muestra correctamente.

Si quitas el final </span> etiqueta de esta parte, también está funcionando (sin embargo, la página se mezcla):

<div class="inner"><span class="corners-top"><span></span></span>
<div class="content" style="font-size: 1.1em;">

<!-- Stackoverflow findy thingy -->
<table border="0" cellspacing="0" cellpadding="0">

Entonces, intente desde el principio con el CSS o intente eliminarlos uno por uno para ver cuál está causando el problema.