Células da tabela maiores do que deveriam ser

Question

Eu criei um sistema de mapas para um jogo que funciona com base no princípio de desenhar a imagem do mapa a partir de peças.Há muitas razões para isso que não vou abordar aqui, mas se você realmente quiser saber, tenho certeza de que pode descobrir como entrar em contato comigo;)

Eu tenho disponibilizou a versão mais recente para que você possa ver exatamente onde está o problema e a origem.O problema é a linha entre os 2 blocos superiores e os 2 blocos inferiores. Não consigo entender por que ficou assim e qualquer ajuda seria apreciada.

Na fonte há um marcador chamado "stackoverflow", se você pesquisar por "stackoverflow" ao visualizar a fonte, ele deverá levá-lo à tabela em questão.

Eu também carreguei um imagem do problema.

Answer 1

Eu acho que você precisa usar display: block em suas imagens.Quando as imagens são inline há um pouco de espaço extra para o espaçamento entre linhas.

Answer 2

Você também pode ajustar a altura da linha do elemento td:

td {
    line-height: 0
}

Answer 3

Eu sei que isso pode parecer ruim, mas você precisa garantir que não haja espaços em branco entre vocês <img> tag e o início do fim </td> marcação.

ou sejaO seguinte apresentará o problema:

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

E isso não irá:

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

Espero que ajude.

Editar:OK, essa não foi a solução.ah!

Answer 4

Não pesquisei tudo, mas o problema está em algum lugar nas folhas de estilo.

Se você copiar apenas a parte da tabela, o mapa estará sendo exibido corretamente.

Se você remover o final </span> tag desta parte, também está funcionando (no entanto, a página fica misturada):

<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">

Então tente desde o início com o css ou tente removê-los um por um, para ver o que está causando o problema.