Jump to content

HTML Newsletter problem


NonCoherent
 Share

Recommended Posts

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 post-102985-0-14270700-1349194938_thumb.jpg <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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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
  • Like 1
Link to comment
Share on other sites

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

Edited by niche
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...