1px white line in Outlook 2007!

Hello,

This is my first post on the forums and I have a problem that has been bugging me and it relates to Outlook 2007 (of course it would!).

When designing my newsletter I keep experiencing a 1px 'gap' between tables. This only seems to show in Outlook 2007. I have tried a few things but can't figure out how to remove it.

http://xs122.xs.to/xs122/07495/help.jpg

Has anyone any ideas?

Many thanks

Dave Dave, 9 years ago

Hey Roscoe, I can understand your frustration, padding and Outlook 2007 are not a good combination. Any chance you can provide a link to the page so we can check out the code and perhaps offer some suggestions?

Mathew Mathew, 9 years ago

Gaps between tables (at least in the browsers of old) often arose from browser bugs in handling white space - so you could try removing white space between the end of one table and the start of the next in your HTML source, as a start.


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

Thanks guys,

Here is a link to the email online

I will try Mathew's suggestions also.

Cheers

Stig Stig, 8 years ago

Without having tested it, I think Mathew is on point with his explanation.

On another note, that's a nice email design, Roscoe!


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Roscoe, 8 years ago

Thanks Stig!

I have tried removing white space and nesting the tables but to no effect. This is annoying as it looks fine in other email clients I've tested on. I have tried to vertically align all the tables to the top to force it out but that didn't work either :(

Anyone have any other suggestions?

Much appreciated,

Roscoe

Stig Stig, 8 years ago

Could you post the updated code, Roscoe?

I would probably try simplifying the code by joining the tables to one.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Roscoe, 8 years ago

Latest code

How do you mean by joining the tables to one?

Stig Stig, 8 years ago

There's still some whitespace between a couple of the tables, but there could be other reasons.

Here's what I mean by joining the tables:

Right now, you have one "container table", and three tables inside it.
If I remove everything but the tables, the structure looks something like this:

<table>
 <tr>
  <td>
   <table>
    <tr>
     <td>Webversion</td>
    </tr>
    <tr>
     <td>Logo</td>
    </tr>
    <tr>
     <td>Header</td>
    </tr>
    <tr>
     <td>Welcome text</td>
    </tr>
    <tr>
     <td>Globe, etc.</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Lorem Ipsum</td>
     <td>Aenean Pretium Ipsum</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Footer</td>
    </tr>
   </table>
   </table>
  </td>
 </tr>
</table>

As you can see, there's also an excessive </table>.

Keeping the container table, I'd suggest something like this:

<table>
 <tr>
  <td>
   <table>
    <tr>
     <td colspan="2">Webversion</td>
    </tr>
    <tr>
     <td colspan="2">Logo</td>
    </tr>
    <tr>
     <td colspan="2">Header</td>
    </tr>
    <tr>
     <td colspan="2">Welcome text</td>
    </tr>
    <tr>
     <td colspan="2">Globe, etc.</td>
    </tr>
    <tr>
     <td>Lorem Ipsum</td>
     <td>Aenean Pretium Ipsum</td>
    </tr>
    <tr>
     <td colspan="2">Footer</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

"Colspan" is the magic word :)

Stig


Edit:
Just let me add, I'm not sure this will solve it either, but I'd do it either way :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Roscoe, 8 years ago

I used that table structure. (Also took the time to clean up my code). Works like a dream now! Lets see what Campaign Monitor testing shows up :P

Thanks loads Stig

emailcodegod, 8 years ago

hey, I had this same problem a few weeks ago..

this is what fixed it for me

i had the </td> on the next line...
<td><img src="anything"/img>
</td>

i changed it to this ...

<td><img src="anything"/img></td>

and it was fixed

hope this helps

by the way i don't recommend using colspan or rowspan you will get complications :D.

Roscoe, 8 years ago

Hi emailcodegod,

Why is colspan bad?

emailcodegod, 8 years ago

sorry let me rephrase, colspan="0" is not supported in Outlook 07.

Through my experience with email templates i find when a cells width is not set it becomes unreliable.

So if you rely on colspan to space out your cells, without setting the width you leave your self open for the width changing in different email cliants.

please correct me if i am wrong.

Roscoe, 8 years ago

Thanks emailcodegod,

I always define a width on tables in HTML emails. It passed the tests ok but will bare this in mind for future builds.

Cheers

imbwaldo, 7 years ago

Another solution I came across is to set this style just inside the body of the email:

<body>
     <style>
          table, td {
               border-collapse: collapse;
          }
     </style>

Hope that helps

--waldo

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