Table cells larger than they are meant to be

Question

I've created a map system for a game that runs on the principle of drawing the picture of the map from tiles. There are many reasons for this which I won't go into here but if you really want to know then I'm sure you can find out how to contact me ;)

I have made the latest version live so you can see exactly where the problem lies and the source. The issue is the line between the top 2 tiles and the bottom 2 tiles, I can't figure out why it's gone like this and any help would be appreciated.

In the source is a marker called "stackoverflow", if you search for "stackoverflow" when viewing source then it should take you to the table in question.

I have also uploaded an image of the issue.

Thanks in advance for any help you can offer.

Answer 1

I know this might sound bad, but you need to ensure there is no whitespace between then end of you <img> tag and the start of the end </td> tag.

i.e. The following will present the problem:

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

And this will not:

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

Hope that helps.

Edit: OK, that wasn't the solution at all. doh!

Answer 2

I haven't looked up the whole thing, but the problem lies somewhere in the style sheets.

If you copy out only the table part of it, it is displaying the map correctly.

If you remove the final </span> tag from this part, it is also working (however the page gets mixed):

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

So either try from the beginning with the css or try to remove one-by-one them, to see, which is causing the problem.

Answer 3

It had the problem before the whitespace was added, I added it to help you guys read the source code.

I will look more closely at the stylesheet, thank you.

Answer 4

I think you need to use 'display: block' on your images. When images are inline there's a little extra space for the line spacing.

Answer 5

Display block solved it!

Answer 6

You could also adjust the line height of the td element:

td {
    line-height: 0
}