I am trying to make a plugin for WordPress.
It works great, except when i load the default WordPress themes. e.g. “twentyeleven.”
This theme has a DOCTYPE as shown below. And hence, no matter what I do, it always inserts this annoying GAP when i put an image in a table.
Please Help!
How do I get rid of this gap?
Below is some code. Anytime a table is placed in a situation in which the DOCTYPE is defined as it is here, then I get this gap.
The WordPress default themes seem to use this DOCTYPE declaration. So they BREAK my pretty plugins…
<!DOCTYPE html>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<td width="100%">
<img border="0" src="http://goo.gl/PJdRU">
</td>
</tr>
</table>
</body>
</html>
All browsers render the above code as shown below. I just want to REMOVE the Gap! Thanks!

There are several solutions, but neither is perfect. I guess the easiest will be just change your img’s style – in CSS (with
td img { display: block }rule) or just an inline style, like this:Here’s an article with explanations why you see what you see – and several possible ways of fixing it. ) And here’s a working JSFiddle to play with.