Image spacing problem in Outlook 2007

Hi there,

I'm designing a newsletter for a client, and have run into a bit of a problem in Outlook 2007 – everything works in other clients.

The specific piece of code that's giving me problems is:

<table width="290" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin:18px 0 18px 0;">
    <tr>
        <td align="left" valign="top" width="90" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;padding:5px;">
            <img src="gallery_1.jpg" border="0" width="80" height="80" title="Flower in sand" alt="Photo of a white flower in the sand"></td>
        <td align="left" valign="top" width="10" bgcolor="#FFFFFF">
            <img src="spacer.gif" border="0" width="10" height="10" alt=""></td>
        <td align="left" valign="top" width="90" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;padding:5px;">
            <img src="gallery_2.jpg" border="0" width="80" height="80" title="Building" alt="Photo of a grey building against the blue sky"></td>
        <td align="left" valign="top" width="10" bgcolor="#FFFFFF">
            <img src="spacer.gif" border="0" width="10" height="10" alt=""></td>
        <td align="left" valign="top" width="90" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;padding:5px;">
            <img src="gallery_3.jpg" border="0" width="80" height="80" title="Sleeping cat" alt="Photo of a brown cat sleeping"></td>
    </tr>
    <tr>
        <td align="left" valign="top" width="10" bgcolor="#FFFFFF">
            <img src="spacer.gif" border="0" width="10" height="10" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" width="90" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;padding:5px;">
            <img src="gallery_4.jpg" border="0" width="80" height="80" title="Grasshopper" alt="Photo of a green grasshopper"></td>
        <td align="left" valign="top" width="10" bgcolor="#FFFFFF">
            <img src="spacer.gif" border="0" width="10" height="10" alt=""></td>
        <td align="left" valign="top" width="90" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;padding:5px;">
            <img src="gallery_5.jpg" border="0" width="80" height="80" title="Sunflower" alt="Photo of a sunflower"></td>
        <td align="left" valign="top" width="10" bgcolor="#FFFFFF">
            <img src="spacer.gif" border="0" width="10" height="10" alt=""></td>
        <td align="left" valign="top" width="90" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;padding:5px;">
            <img src="gallery_6.jpg" border="0" width="80" height="80" title="Arch" alt="Photo of an arch formed in red stone"></td>
    </tr>
</table>

I just want a grid of images with a 5px space (colored #CCCCCC) around them, then a 1px border (colored #b7b7b7) around that. The spacing between the individual cells should be 10px.

Every single client I've tested in (Outlook 2000, 2002/XP, 2003, Thunderbird 2.0, Thunderbird 3.0 beta, Lotus Notes 8) displays everything as it's supposed to be displayed, but Outlook 2007 adds loads of vertical spacing around the images. I've tried everything in my arsenal, including stripping all whitespace and rearranging the styling.

Can anyone out there find a solution? I would really appreciate it :)


Thanks in advance,


Mads

roshodgekiss roshodgekiss, 7 years ago

Hi Mads,

Try removing the 'align' and 'valign' attributes (eg. td align="left" valign="top"). You don't need them and Outlook 07 tends to add padding around elements where alignment is set in this manner. Let me know how you go with this. Have a great weekend!


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

Mads,

Try this instead:

<table width="302" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF">
    <tr>
        <td width="92" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;">
            <div style="font-size:5px;">&nbsp;</div>
            <div align="center"><img src="gallery_1.jpg" border="0" width="80" height="80" title="Flower in sand" alt="Photo of a white flower in the sand" style="display:inline;"></div>
            <div style="font-size:5px;">&nbsp;</div>
        </td>
        <td width="10" bgcolor="#FFFFFF">&nbsp;</td>
        <td width="92" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;">
            <div style="font-size:5px;">&nbsp;</div>
            <div align="center"><img src="gallery_2.jpg" border="0" width="80" height="80" title="Flower in sand" alt="Photo of a white flower in the sand" style="display:inline;"></div>
            <div style="font-size:5px;">&nbsp;</div>
        </td>
        <td width="10" bgcolor="#FFFFFF">&nbsp;</td>
        <td width="92" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;">
            <div style="font-size:5px;">&nbsp;</div>
            <div align="center"><img src="gallery_3.jpg" border="0" width="80" height="80" title="Flower in sand" alt="Photo of a white flower in the sand" style="display:inline;"></div>
            <div style="font-size:5px;">&nbsp;</div>
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFFFFF"><div style="font-size:10px;">&nbsp;</div></td>
        <td bgcolor="#FFFFFF"><div style="font-size:10px;">&nbsp;</div></td>
        <td bgcolor="#FFFFFF"><div style="font-size:10px;">&nbsp;</div></td>
        <td bgcolor="#FFFFFF"><div style="font-size:10px;">&nbsp;</div></td>
        <td bgcolor="#FFFFFF"><div style="font-size:10px;">&nbsp;</div></td>
    </tr>
    <tr>
        <td width="92" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;">
            <div style="font-size:5px;">&nbsp;</div>
            <div align="center"><img src="gallery_4.jpg" border="0" width="80" height="80" title="Flower in sand" alt="Photo of a white flower in the sand" style="display:inline;"></div>
            <div style="font-size:5px;">&nbsp;</div>
        </td>
        <td width="10" bgcolor="#FFFFFF">&nbsp;</td>
        <td width="92" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;">
            <div style="font-size:5px;">&nbsp;</div>
            <div align="center"><img src="gallery_5.jpg" border="0" width="80" height="80" title="Flower in sand" alt="Photo of a white flower in the sand" style="display:inline;"></div>
            <div style="font-size:5px;">&nbsp;</div>
        </td>
        <td width="10" bgcolor="#FFFFFF">&nbsp;</td>
        <td width="92" bgcolor="#CCCCCC" style="border:1px solid #b7b7b7;">
            <div style="font-size:5px;">&nbsp;</div>
            <div align="center"><img src="gallery_6.jpg" border="0" width="80" height="80" title="Flower in sand" alt="Photo of a white flower in the sand" style="display:inline;"></div>
            <div style="font-size:5px;">&nbsp;</div>
        </td>
    </tr>
</table>

Brian Thies
Professional Email Developer
Thies Publishing
dkirkham dkirkham, 7 years ago

Hi, I have a similar problem. An extra space is appearing after the image only in Outlook 2007, my code is:

<repeater toc='false'>
    <h3>
        <$title link='false' default='News article title here...'$>
    </h3>
    <img src="<$imagesrc link='true'$>" width="110" height="73" border="0" alt="Small photo" align="left" />
    <$description default='Enter your description here...'$>
    <p class="top"><a href="#top">Back to top</a></p>
</repeater>

I have tried the tips metioned to remove the align in the img and assign the style inline attribute... this doesn't work, just makes the img appear in default block, so text then appears direclty under the small image i am trying to include next to the copy.

Renders fine in browser, etc... just Outlook 2007 it is throwing the design out. I have set the margin and padding on the p tag that is written into the code on output, but the problem isn't margin or padding because if i drag over the email you get the white space highlighted and its a spurious extra character that seems to be getting displayed in Outlook 2007?!?!?


David Kirkham
Dot Com Imaging
http://www.dotcomimaging.com
BThies BThies, 7 years ago

Hi David,

Can you e-mail me your entire code and I'll take a look from there?

Thanks!


Brian Thies
Professional Email Developer
Thies Publishing
dkirkham dkirkham, 7 years ago

Thanks... have emailed you now:-)


David Kirkham
Dot Com Imaging
http://www.dotcomimaging.com
BThies BThies, 7 years ago

For David's question, it was a combination of properties and elements used together that caused an issue with the way Outlook 2007 displayed it.

Here's the breakdown:
- The <p> tags had margin and padding properties to adjust spacing
- If an image was used in the repeater, it was text wrapped and aligned left
- The image aligned to the top of the <description> (which uses <p> tags), and displayed correctly up until a link was added to the image.  As soon as the link was added, Outlook 2007 would add a line break at the top of the <description> text area.  This caused the image to sit one line higher than the text.

In this situation, the solution was to remove the ability to link the image, thus preventing the line break.


Brian Thies
Professional Email Developer
Thies Publishing
enktesisllc enktesisllc, 6 years ago

Yes. This is annoying and there are two very simple solutions:

1. Embed the image in a table with columns or rows above, left, right, or below with &nbsp; elements in each empty cell. Set table to all 0's (padding, border, between, etc).  However, this does create more tables which is not always desirable.

2. Even simpler and always effective in all browsers and clients is simply create the image with white borders included (or whatever your background color is). Or use PNG or GIF transparency (though this is unpredictable in mobile browsers).


Marco Ciavolino
marco@enktesis.com
Full Contact Info at http://www.meetmarco.com
brown.alex7734, 6 years ago

great to shared the info.

BThies BThies, 6 years ago

"Or use PNG or GIF transparency"

Keep in mind that PNG's are not supported in all e-mail clients.  Best to only use GIF or JPG.


Brian Thies
Professional Email Developer
Thies Publishing
MattJarvie, 5 years ago

Dunno if anyone still cares, but I found this thread while looking for a solution to Outlook 2007 adding a line break above the p tag next to an image with align="left" when it's inside a link (what a mouthful). A few posts up, it says you have to not link the image, which didn't help me a lot. However, in desperation, I tried something and it worked for me:

If the text is not inside a p tag, it doesn't drop.

So the code with the problem might look something like this:

<a href='http://somesite.com'><img src='http://mysite.com/myimage.jpg' align='left' /></a><p>this text gets dropped down a line, yuck</p>

And the code that looks somewhat better would look more like:

<a href='http://somesite.com'><img src='http://mysite.com/myimage.jpg' align='left' /></a>this text doesn't get dropped but if you want paragraph breaks you have to<br><br>use the br tag. meh

I realize it's not exactly ideal because it's harder to control the amount of spacing between paragraphs using the br tag. But at least it solved my problem and I can have text wrapping around images that link.

Hope this helps someone who may be banging their head against the brick wall that is Outlook 2007.

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