<p>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 ;)</p>

<p>I have <a href="http://woarl.com/board/rob.php?mode=map&amp;x=-1&amp;y=9&amp;w=2&amp;h=2" rel="noreferrer">made the latest version live</a> 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.</p>

<p>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.</p>

<p>I have also uploaded an <a href="http://woarl.com/badMap.png" rel="noreferrer">image of the issue</a>.</p>

[{'answer_id': 22013, 'author': 'samjudson', 'author_id': 1908, 'author_profile': 'https://Stackoverflow.com/users/1908', 'pm_score': 2, 'selected': False, 'text': '<p>I know this might sound bad, but you need to ensure there is no whitespace between then end of you <code>&lt;img&gt;</code> tag and the start of the end <code>&lt;/td&gt;</code> tag.</p>\n\n<p>i.e. The following will present the problem:</p>\n\n<pre><code>&lt;td&gt;\n &lt;img src="image.jpg"/&gt;\n&lt;/td&gt;\n</code></pre>\n\n<p>And this will not:</p>\n\n<pre><code>&lt;td&gt;&lt;img src="image.jpg"/&gt;&lt;/td&gt;\n</code></pre>\n\n<p>Hope that helps.</p>\n\n<p>Edit: OK, that wasn\'t the solution at all. doh!</p>\n'}, {'answer_id': 22016, 'author': 'Biri', 'author_id': 968, 'author_profile': 'https://Stackoverflow.com/users/968', 'pm_score': 1, 'selected': False, 'text': '<p>I haven\'t looked up the whole thing, but the problem lies somewhere in the style sheets.</p>\n\n<p>If you copy out only the table part of it, it is displaying the map correctly.</p>\n\n<p>If you remove the final <code>&lt;/span&gt;</code> tag from this part, it is also working (however the page gets mixed):</p>\n\n<pre><code>&lt;div class="inner"&gt;&lt;span class="corners-top"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;\n&lt;div class="content" style="font-size: 1.1em;"&gt;\n\n&lt;!-- Stackoverflow findy thingy --&gt;\n&lt;table border="0" cellspacing="0" cellpadding="0"&gt;\n</code></pre>\n\n<p>So either try from the beginning with the css or try to remove one-by-one them, to see, which is causing the problem.</p>\n'}, {'answer_id': 22025, 'author': 'Daniel James', 'author_id': 2434, 'author_profile': 'https://Stackoverflow.com/users/2434', 'pm_score': 6, 'selected': True, 'text': "<p>I think you need to use <code>display: block</code> on your images. When images are <code>inline</code> there's a little extra space for the line spacing.</p>\n"}, {'answer_id': 22068, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 3, 'selected': False, 'text': '<p>You could also adjust the line height of the td element:</p>\n\n<pre class="lang-css prettyprint-override"><code>td {\n    line-height: 0\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/22000', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1384652/']