Vertical space between images

I am at the end of my rope here and I see so many helpful replies I think I ought to try asking for help.
First of all, not a pro coder, I am civil engineer with a talent for figuring out how to make stuff work and folks here at the office asked me to try making a couple nice marketing html e-mails.  My first attempt was very simple and well received.  I am trying to be a little more fancy this time, but to no avail thanks to Outlook.

I am trying to put two images next to each other and use tables.  Before I give up and listen to the folks who calmly say "please don't rely on html for exact layout" I thought I should check with the pros.  Note that the images here are for a test, clearly they could be combined into a single image, but I just started playing with this section, and I have places later in the e-mail where I need to rely on this technique.

I have to tell you, I have read nearly every post I can find, tried all the combos of padding, border, display: block; etc. (display: block; actually ADDED padding to the bottom of my images where it wasn't before). My <td> and </td>'s are on the same lines with the images.  This worked great in outlook, ymail, gmail, hotmail, when it was a bunch of divs, I recoded the whole thing this morning after reading that I should be using table and inline styles exclusively, without css at all.  Looks great in the browser, but get this bug in Outlook with a 1 pixel space to the right of each image.

<table cellpadding="0" cellspacing="0" bgcolor="#f3d594" align="center" height="25px"><tr>
    <td width="350" height="103" ><img alt="fdfads" border="0" src="http://******/headertopleft.jpg"></td>
    <td width="350" height="103" ><img alt="fdfads" border="0" src="http://******/headertopright.jpg"></td></tr>
</table>

I am humble and nearly defeated - anything you can do to help me is appreciated.

Bonnie Builder

fyredefyre fyredefyre, 6 years ago

Hi Bonnie,

You're on the right track, so don't give up on yourself yet! :)

Try tinkering with your code a little with things like:

- Set the width of your table (ie 700px)
- Set the width of your images for clarity
- Keep img { display; block } for browser consistency

Also I'd also check your images that you've cropped an inserted into the cells. I've cropped images before with a 1px white line in before and it's driven me crazy thinking it was my HTML when in fact it was the image.

Let me know how you go.


www.phenom.com.au - Everything Email.
Email: jordan.hunt@phenom.com.au Skype: fyredefyre
bonnie_builder, 6 years ago

Thanks so much!  I will try those things.  I might go home (since it is nearly 5pm here) and get some rest because a clear head always seems to help solve it.

Ok, something odd that could have saved me a few hours - when I set the message up in outlook, I have those spaces, to the right of each image, 1px.  But when I send it to myself or send it to some test accounts from outlook, no spaces.  I guess I should just count my blessings - but my goodness!  As a newbie, I am stunned at the amount of stuff you professionals have to wade through to make it work all over!

I will let you know how it goes in the morning (my time)!!!!

Richard.Wendon Richard.Wendon, 6 years ago

Hi Bonnie Builder,

Your right, inline styles are the way to go...without hesitation.

However CM will do this for you when you import your email design, so you can save yourself a lot of time when coding by keeping the styles in the head of the file, (that is assuming your using CM to send your email, and not just using the forum for support)

What a lot of coders will do and i suspect Jordan does something similar will be to make certain declarations, including... that images have margin: 0; padding: 0, display: block, border: none; (it should be noted if you intend to use hspace and vspace for images in a repeater for example you wont want to include the margin: 0; declaration)

The other thing as Jordan points out is to declare the widths on all the assets on the page where possible... so tables, tds etc...

You havent said whether or not you need a gap between the two pictures, but if you do its worth creating a transparent gif (shim), i have one that i have that is 10px square, which i resize to fit "blank areas", can be a little over the top, but it certainly helps retain structure on some browsers.

All the best.

BThies BThies, 6 years ago

@Bonnie
While you're coding things up:  Height is not fully supported in <table>'s & <td>'s, so only specify height in images.  Also, you specified a height of 25px for your table and 103px for the <td>'s - although height isn't fully supported, everything should always add up.

@Richard
• border:none is not fully supported, best to specify border="0" within every image
• hspace and vspace are not fully supported
• horizontal "shim" images are not necessary, as a simple <td width="10">&nbsp;</td> would be sufficient (and would prevent a red X in several e-mail clients if images are disabled)


Brian Thies
Professional Email Developer
Thies Publishing
Richard.Wendon Richard.Wendon, 6 years ago

Brian... have to be honest... i havent personally come across any issues with border:none, but cheers for the heads up... only lotus (spits on it!) has some issues, that i am aware

Same with the hspace and vspace... again... i havent come across any issues, not saying they aren't there, but what email clients are you refering to? The biggest problem with this i have found is that it puts space all the way around an object which is rarely what someone is after... but it does allow someone to have an image inline of a paragraph tag, and choose to include it or not within a repeater for example.

And no horizontal shims aren't always necessary, but they are for vertical spacing... and to be honest it at least ensures cells do as they are told... i treat them as cell police.

BThies BThies, 6 years ago

Hi Richard,

• For border:none, Outlook Web Access doesn't support any styles.  Many major companies use it and it's very big with colleges.

• hspace and vspace are unsupported in Outlook 2007 and Lotus 6.5/7

• <div>'s can be used for vertical spacing instead of spacers  (ex: <div style="font-size:15px;">&nbsp;</div> will provide around an 18px spacing based on the auto line height created with the font-size).


Brian Thies
Professional Email Developer
Thies Publishing
Richard.Wendon Richard.Wendon, 6 years ago

Outlook Web Access - sure companies use it, but surely that's off the back of a main Outlook... I mean we have Access here... but only use it in extreme cases i.e away from the office... (ultimately so you know i put border="0" in anyway)

Hpsace and Vpsace i have working fine in Outlook 2007. One of the biggest issues i have found is that if you declare images to have no margin, the hspace/vspace will fall over.

divs... in emails..personally ive always tried to avoid, but each to their own, although getting "around" 18px of space where you need exactly 10px for example...wouldnt be good enough.

BThies BThies, 6 years ago

• With OWA, some companies and colleges allow forwarding, but the primary access is using OWA.  One of the local colleges here provides log in through OWA only for management purposes.

• Correction on my previous statement - MobileMe does support hspace/vspace (as long as the height & width of the image are specified).

For Outlook 2007 though, can you share some code showing Outlook 2007 displaying hspace/vspace correctly?  I must be missing something, but I use the following as a basic test and Outlook 2007 does not support it:

<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td width="600" bgcolor="#000000"><img src="http://www.thiespublishing.com/img/about.jpg" width="400" height="225" hspace="50" vspace="50" border="0" /></td>
  </tr>
</table>

• The font-size of the <div> can be adjusted however you see fit to get the spacing you're looking for.  Also, <div>'s provide the most consistent display across all e-mail clients.  Next to tables, it's universally recognized... but like you said, to each their own.


Brian Thies
Professional Email Developer
Thies Publishing
Richard.Wendon Richard.Wendon, 6 years ago

Regarding Outlook 2007 and hspace/vpsace please see the following link

http://msdn.microsoft.com/en-us/library/aa338201.aspx indicating that outlook supports hspace and vspace in outlook 2007...

Re: the code, if i had done the work for myself and not the company that i am employed by i would show the specific code. in our templates...(where would we be if we gave everything away) The mistake that i used to make was that i had margin: 0; declared on my images at the highest level, this wipes out the hspace/vspace 'padding' i retain padding: 0; display: block; border: none;

Here is a screengrab of the latest "free template" we will be offering to clients... specifically showing hspace/vpsace in OL2007 http://bit.ly/bkX8s1 you can see the img is nudged down and right from the edge... see dotted line above.

@Bonnie... apologies for this going a smidge of track... but like you said... its amazing how complicated some of this can get :)

PeterH, 6 years ago

Brian, if you use the align attribute in the image then the hspace and vspace will work. E.g. align="left" .


Peter van den Heuvel
B-ware Business Software
peter@b-ware.com
http://www.b-ware.com/
BThies BThies, 6 years ago

Yes I got that - I can use align to make it work, but it still won't work in Lotus 6.5/7.

Any fix should be universal, especially when Lotus 6.5/7 is still a major e-mail client that should be supported.


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

BTW -  It looks like MobileMe stops supporting it once you've done the align... so again, it's a matter of how much support you're going for on the design.


Brian Thies
Professional Email Developer
Thies Publishing
Richard.Wendon Richard.Wendon, 6 years ago

Ultimately its fair to say that until all email clients work to the same standards we are up against it.

But the two examples you have just said are not supported account for a whooping combined total of 1.37% of usage... if im covering the rest, im happy. Please see http://www.campaignmonitor.com/stats/email-clients/

Now im not sure if the stats take into account all our clients or subscribers to CM (which would have more modern email clients... and more Apple related ones) but either way, there is a limit to the amount of time  i think any of us should invest in getting an email to render correctly, in all email clients.

Oh, and having just done a Litmus test, the latest version of Lotus displays fine...

BThies BThies, 6 years ago

Freelance coding for many major international marketing companies with big name clients, I'm amazed at how many people review the documents I send over, and how many different e-mail clients they use to review it.  I've had to go back and re-do code enough times that I code for maximum compatibility right from the start.

I agree, it depends on who you're sending the e-mail to and what stats you're looking at, and I'd estimate based on those stats that CM is primarily used for B2C.  If the overwhelming usage of your e-mail campaigns go to personal accounts, then yes, it's a much smaller usage.

In B2B, however, it's a much different picture with that percentage being higher.  (I've generally seen 3-5% for Lotus 6.5/7, which is enough to justify it as a major e-mail client worth coding for).  Clients like Hotmail/Gmail however may drop into the 0.1-0.2% in B2B, but I still have to add the necessary display:block/display:inline so it appears correctly in FF.  You never know what a person will be viewing it on.  (iPhone, OWA, etc.)

As you mentioned, there's a limit to the amount of time one should invest, and the service level agreement between the coder and client should really dictate how many e-mail clients it'll appear correct in.  With that being said, if basic standards are used across the board when coding, the e-mail will always display correctly in 98%-99% of e-mail clients without having to spend extra time doing back and forth testing.


Brian Thies
Professional Email Developer
Thies Publishing

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