2 issues with outlook I am having

So for the past couple of days I have been trying to solve two issues that I cannot seem to get my head around.

The first issue is this
Problem 1 Link

One of the first things i tried was to see if i could find any solution on the internet and the most popular one seemed to be
the one from emailonacid
but that did not seem to work at all for me.  I then tried to add specific CSS targeting outlook to try to maybe brute force a solution but the solutions never gave me the result i was looking for.  Some of the things that I have tested to try and figure out the problem is that if I change the text so that they are both the same then both the boxes will become the same size.  If I make one text longer than the other then only one of the boxes will grow while the other one will remain the same size.  The template does work as intended as long as I am not using Outlook.  My guess at the moment is that the CSS might be getting ignored by outlook so I will try to inline everything and try that out.

The second problem is
Second Problem's Picture

For some reason in Outlook there is an extra 55 pixel column to the right of the email.  The footer seems to stretch to this for some reason and I could not figure out a way to get rid of it.  When I was testing the footer I removed some of the footer elements such as the slogan and the team member sections which was able to make the extra column shrink to around 10 pixels which looks like 10 pixel gap picture
This one seems much much tougher to solve.


The code for only the first problem section is here
First Problem Section Code

The code for only the second problem section is here
Second Problem Section Code

The entire template code is here
Full Code

These problems only appear when using outlook 2007 and outlook 2010.  I don't have outlook 2013 and the company doesn't use it so that is one less headache I need to worry about.  If anyone has any idea for something I should try feel free to post it.  I am currently pretty stuck trying to figure out a solution to this problem so I am willing to try any new ideas.

Thank you guys for giving me your time and trying to help me.

Carissa Carissa, 2 years ago

Hi ahua,

Welcome to our forum! I tested your full code and wasn't seeing the same 2 problems. I used 2 different testing services and both look good in Outlook 2007 and 2010. Here you can see that both boxes are the same size and the additional ~55 pixel white space on the right is not there:
http://f.cl.ly/items/3I2q2u1v3h1k050X0b1U/Image%202013.12.09%2011%3A55%3A13%20AM.png

Might your code have changed? Could something specific to your network be messing with your code?


Carissa
Campaign Monitor
ahua, 2 years ago

Sorry for the late reply. Wow that is really strange.  I should definitely try to test on another network and another computer.  I noitice when I was sent a pdf for a list of changes to be made the extra 55 pixel on the right hand side is not there either.  It might be something weird with my computer or network since I have only been trying to fix this issue using my laptop and the network at work.

Thanks for posting and trying to help with my issue.  I will definitely continue testing and trying to see what might be causing the issue.

Carissa Carissa, 2 years ago

Let us know how it goes, ahua!


Carissa
Campaign Monitor
Jonathan Hodak Jonathan Hodak, 2 years ago

ahua,

   I briefly looked over your code for your first problem.  While there are quite a few possibilities as to where these problems could be stemming from.  I would start by saying that I noticed your two different TD sections have different heights set.  One is 33px tall the other is 40px tall.  Which does not seem like that big of a deal, but I have noticed that when I have different heights set I tend to get bizarre results (sometimes). 

Other things, I would put a style="display:block;" on your images (not on the td, on the actual image) outlook 2013 and 2010 have some strange rendering issues with images when they do not display block (1-2 px of phantom white space appears at the bottom).

I do all of my styling in-line and I avoid div's and <p> tags, it is much messier code, but it renders more unfiormly across browsers and devices with the intended results. 

If you can not get the tops to display the way you want re-structure your email. You have a lot of unnecessary tables with rows in your email where instead of a row with a table with a row with a div and then your data. 

Try something like this:

<tr>
<td align="left" valign="top" height="40" bgcolor="#13867d" width="268">Marketing, Media &amp; Technology</td>
<td width="20"></td>
<td align="left" valign="top" height="40" bgcolor="#d09b2c" width="268">Technology, Software, Information &amp; Business Services</td>
</tr>

That will clean up a lot of code, and while I wrote it quickly, I think it will work from what I saw in your coding, might take a little tweak or two.  Also I can't see how you are styling your text, but the line-height could be a factor as well, since one side is two lines and the other is only one.  Further something like your font-family should be declared somewhere, otherwise your results will be a bit strange from browser to browser.

These are by no means a definitive answer, just some things I would take a look at that might simplify some things and hopefully fix your problem to your first section.

I very very briefly peeked at your full code. 
Why is your line-height set in pt's and not pixels?


Best of luck,

- Jon
ahua, 2 years ago

Hello sorry for the late reply.  I tried this
http://help.campaignmonitor.com/topic.aspx?t=410
and when i previewed in outlook the boxes reverted back to the same size and the mysterious right square on the right side dissappeared.

Thanks Hodak those are some really good suggestions.  When I started to modify this I actually did not know how bad the template coding was since I am used to coding the website for the company and did not have any prior experience with email templates.  I was given this when the original creator refused to update and modify the code to import into campaign monitor.  I did learn a lot the past couple of days while I was searching google for a solution and I do agree that inline CSS is a much better choice and I would also structure the tables according to this 

http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010

which seems pretty similar to what you suggested.  I would rewrite the templates if i had extra time but if I were going to rewrite all the code I would have to rewrite code for another 7 different templates, so if possible I would just try to modify the existing code here.  At least on a positive note I did learn a lot about programming for templates when I encountered the bugs.  I'm still very surprised that I have to code like people back in 1995 for this.

ahua, 2 years ago

Sorry for the double post but I really need to thank Johnathan Hodak for giving me that suggestion of restructuring the yellow and green labels.  The display was fixed when changing the windows setting but when changing the text the labels would not scale with each other so I restructured it using some of Hodak's code. 

the fix looks like this

                                                    <table border="0" cellpadding="0" cellspacing="0" width="556">
                                                        <tr>
                                                                    <td align="left" valign="top" bgcolor="#13867d" width="268" style="color:#FFF; font:bold 11px Verdana, Helvetica, sans-serif; line-height:11p; padding-bottom:20px; padding-top:10px; padding-left:10px;"><multiline>Marketing, Media &amp; Technology</multiline></td>
                                                                    <td width="20" style="padding-bottom:20px;padding-top:10px;"></td>
                                                                    <td left="left" valign="top" bgcolor="#d09b2c" width="268" style="color:#FFF; font:bold 11px Verdana, Helvetica, sans-serif; padding-bottom:20px;padding-top:10px; padding-left:10px;"><multiline>Technology, Software, Information &amp; Business Services</multiline></td>
                                                        </tr>
                                                       </table>

or

PasteBin vers

Its basically the same structure as what Johnathan posted but with some inline css in there.  Again big thanks to Johnathan for helping me with the problem!

Jonathan Hodak Jonathan Hodak, 2 years ago

Ahua,

   You are very welcome.  Peeking at your code be careful, there are some spots that I would update or fix.  Here is the fixed code.  A few slight differences.

<table border="0" cellpadding="0" cellspacing="0" width="556">
                                                        <tr>
                                                                    <td align="left" valign="top" bgcolor="#13867d" width="268" style="color:#FFF; font:bold 11px Verdana, Helvetica, sans-serif; line-height:11px; padding-bottom:20px; padding-top:10px; padding-left:10px;"><multiline>Marketing, Media &amp; Technology</multiline></td>
                                                                    <td width="20" style="padding-bottom:20px;padding-top:10px;"></td>
                                                                    <td align="left" valign="top" bgcolor="#d09b2c" width="268" style="color:#FFF; font:bold 11px Verdana, Helvetica, sans-serif; line-height:11px; padding-bottom:20px;padding-top:10px; padding-left:10px;"><multiline>Technology, Software, Information &amp; Business Services</multiline></td>
                                                        </tr>
                                                       </table>

You did not specify a line height in the one, the other one your line height was 11p (this can cause really weird things to happen, 11x = 11 times, 11pt is points not pixels, 11px is pixels, 11p...not sure how this might render, but I would imagine it will end up looking weird across different browsers.  Also on one you had left="left" which clearly is true, but I imagine you meant align="left".

:) Happy Friday!


Best of luck,

- Jon
ahua, 2 years ago

Thanks for all your help again.  I actually caught that left=left mistake once i went back to the code after posting.  I was working on this pretty late into the night so I guess typos were bound to happen at some point.

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