Please help me with this image gap problem :(

Hey guys,

I'm new to these forums so hello!

I have a really annoying problem with when I create HTML emails from Photoshop and send them out. Basically, when I double click the HTML file, it displays perfectly on Opera. When I view this email on Windows Live Mail client, it looks fine. But when I look at it on Gmail or Hotmail or Yahoo! etc, it has these spaces between the images! I have NO idea how to fix this! I've tried things like the adding of style=� display:block� inside img tags I really need some urgent help if anyone knows what is going on? I would REALLY appreciate it! Also I'm sending these emails out with Outlook 2007

This is the html (sorry I don't know how to make it display inside the "code" box):

<html>
<head>
<title>email2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (email2) -->
<table id="Table_01" width="700" height="295" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="images/email2_01.gif" width="700" height="239" alt="" border="0"></td>
    </tr>
    <tr>
        <td>
            <img src="images/email2_02.gif" width="295" height="21" alt="" border="0"></td>
        <td>
            <a href="www.google.com">
                <img src="images/email2_03.jpg" width="28" height="21" alt="" border="0"></a></td>
        <td>
            <img src="images/email2_04.gif" width="377" height="21" alt="" border="0"></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/email2_05.jpg" width="700" height="35" alt="" border="0"></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Hi Lok3sh, welcome to the forums! Just to make things clear, you're sending this design using Outlook 2007, not using an email marketing service like Campaign Monitor or MailChimp? We really can't presume that email clients like this won't make their own changes, so it's likely that the issue is being caused by Outlook 2007 itself.

Second to that, I'd add img { display: block !important; } to a stylesheet. Again, if you're sending using a desktop email client, then you probably aren't inlining your CSS code and it's simply getting stripped out by Gmail and others.

Try using our service and see how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Lok3sh, 4 years ago

Yes I am using Outlook 2007 and not anything else.

Also would you be able to explain to me where I add that line "img { display: block !important; }" in my script? If its not too much to ask could you please fix my HTML script to show me exactly how to do it so I can do it the next time I do one of these?

Also if Outlook 2007 is the problem, is there any way to test and see if it will work from Campaign Monitor before I pay for an account?

Also the reason I'm using Outlook is because I can embed the images without having to host them seperately and link them in the HTML code. Is there another place to send these from with embeded images?

Thanks so much for the help!

roshodgekiss roshodgekiss, 4 years ago

Hi Lok3sh, you may want to start off by reading this primer on coding email newsletters. At least a fundamental understanding of HTML and CSS coding is required to create, test and send HTML email campaigns. If you're really in a jam, you may want to try using our template builder, instead :)

To answer your question, pop <style type="text/css"> img { display: block !important; } </style> just after the <meta... > tag in your code. You'll also want to change 'charset=iso-8859-1' to 'charset=utf-8'.

Also if Outlook 2007 is the problem, is there any way to test and see if it will work from Campaign Monitor before I pay for an account?

Yes - you can sign up for a free account and test to up to 5 email addresses for free.

Is there another place to send these from with embeded images?

Campaign Monitor hosts all images for free upon import of a campaign to the app. Thanks, Lok3sh - best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Alex I., 4 years ago

Sorry if I'm just being stupid but I think you can remedy this problem simply by adding valign="top" to all the TD's which have images inside.

Cheers,
Alex.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098