HTML Newsletter problem

[NonCoherent]

Hi, I've been trying to get this code to make the images sit flush and no matter what i try there is always a browser or email client that shows horizontal gaps between the images. The usual culprits are Safari and Gmail, i've had it looking perfect in IE and Outlook but it must be the way Gmail reads the code thats causing the problem.Ive tried: style=" block: display" and "font-size: 0"(i read that sometimes this can solve the issue with gmail), also specified cellSpacing="0" cellPadding="0". i also tried using divs with a margin of -4, this works in safari but not in gmail, ive also tried specifying the image heights but agian it has the same issue. Has anyone got a solution to this? Theres an image attached of the problem and the code i'm using is below, ive simplified it as much as possible to try and solve this issue but still they come back!! Many ThanksBen <table cellSpacing="0" cellPadding="0" width="552" align="center"><tr><td><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/company-Homepage.jpg"></a><img alt="" src="http://www.website/pages/online.asp?NID=#NID#&ID=#ID#"><img border="0" alt="" src="http://www.website/i...ns/Shopping.jpg" width="108" height="33"></a><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/News.jpg"></a><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/About.jpg"></a><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/Store-Locator.jpg"></a><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/FAQ.jpg"></a></td></tr><tr><td><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/IT_MM/Everyday_innovations_IT1.jpg"></a></td></tr><tr><td><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/IT_MM/Everyday_innovations_IT2.jpg"></a></td></tr><tr><td><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/IT_MM/Everyday_innovations_IT3.jpg"></a></td></tr><tr><td><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/IT_MM/Everyday_innovations_IT4.jpg"></a></td></tr><tr><td><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/IT_MM/Everyday_innovations_IT5L.jpg"></a><a href="http://www.website/images/companymail/2012/IT_everyday_innovations/IT_MM/Everyday_innovations_IT5R.jpg"></a></td></tr></table>

[Ingolme]

Images are inline elements. They always have a small horizontal gap under them. Does your document have a <!DOCTYPE> ? If it does, removing it will most likely fix the problem.

[NonCoherent]

Ive tried a test send with just the code ive pasted above and it still manages to pick up the gaps from somewhere. Do you rekon it would work if i specified a doctype? It's drving me mad, i get emails every day with images and no gaps for different links, is there a better way of doing it that i dont know about?

[niche]

Use float instead of tables for your structure unless there's some overwhelming reason to use tables. Based on your thumbnail using divs and float would probably be better even though you probably have to forfeit some work.

Edited October 2, 2012 by niche

[Ingolme]

Specifying a doctype wouldn't work, as images are supposed to have the gap below them in standard browsers.I'm not sure how much CSS will work but you could add this to your <img> elements:

<img style="vertical-align: middle;" src=" ... ">

Use float instead of tables for your structure unless there's some overwhelming reason to use tables.

HTML e-mails don't support a lot of CSS. Using old-school techniques is more likely to look the way it's intended

[niche]

Haven't experienced that situation yet. I'm sure you probably saved me a few hours someday. Thanks fox.

Edited October 2, 2012 by niche

[NonCoherent]

Thanks for the tips, ill try them at work tomorrow. Hopefully my issue will be resolved!