I am about to lose my mind. PLEASE HELP with my HTML newsletter

HTML & CSS
1

Hi All,

I am having major issues with my html newsletter.
I ran a test and have implemented various fixes to deal with issues I have had with yahoo and hotmail.
I had no issues with Outlook, well my version that is, which is I think the latest…until now…

Whilst the newsletter did not render OK across other web and desktop based clients, in Outlook it was all OK and now that I have fixed the other issues, there is a white border showing on the right of the footer and I cannot work out where it is coming from and how to fix it.
I have spent days trying to make sense of this newsletter design…

Help is MUCH MUCH MUCH APPRECIATED!

Here is the code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Facebook sharing information tags --><meta property="og:title" content="*|MC:SUBJECT|*">

<title>*|MC:SUBJECT|*</title>




















































































<style type="text/css">
		.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		.ExternalClass *{
			line-height:120%;
		}
		body{
			width:100%;
			background-color:#DDDDDD;
			padding:0;
			margin:0;
			-webkit-text-size-adjust:none;
		}
		span.yshortcuts{
			color:#000;
			background-color:none;
			border:none;
		}
		span.yshortcuts:hover,span.yshortcuts:active,span.yshortcuts:focus{
			color:#000;
			background-color:none;
			border:none;
		}
		.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		body{
			width:100%;
			background-color:#DDDDDD;
			padding:0;
			margin:0;
			-webkit-text-size-adjust:none;
		}
		span.yshortcuts{
			color:#336699;
			background-color:none;
			border:none;
		}
		span.yshortcuts:hover,span.yshortcuts:active,span.yshortcuts:focus{
			color:#336699;
			background-color:none;
			border:none;
		}
		table{
			border-collapse:separate;
		}
		a,a:link,a:visited{
			text-decoration:none;
			color:#336699;
		}
		a:hover{
			text-decoration:underline;
		}
		h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht{
			color:#202020 !important;
		}
		p{
			margin-bottom:0;
		}
		.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td{
			line-height:100%;
		}
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="width: 100%;background-color: #DDDDDD;-webkit-text-size-adjust: none;padding-bottom: 0;padding-left: 0;padding-right: 0;padding-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;margin-top: 0;padding: 0;margin: 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%;background-color: #DDDDDD;padding: 0;margin: 0;-webkit-text-size-adjust: none;border-collapse: separate;"><tr><td>

     <center>
         <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="width: 100%;height: 100%;background-color: #DDDDDD;padding-bottom: 0;padding-left: 0;padding-right: 0;padding-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;margin-top: 0;border-collapse: separate;"><tr>
<td align="center" valign="top" style="border-collapse:collapse;">




















   <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader" style="background-color: #DDDDDD;border-collapse: separate;"><tr>
<td valign="top" class="preheaderContent" style="border-collapse:collapse;">

                                 <!-- // Begin Module: Standard Preheader  -->
                                    <table border="0" cellpadding="10" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;">
                                             <div mc:edit="std_preheader_content" style="text-align:left;mso-line-height-rule:exactly line-height:100%;font-size:10px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"></div>
                                            </td>
                                            <!-- *|IFNOT:ARCHIVE_PAGE|* -->
           <td valign="top" width="190" style="border-collapse:collapse;">
                                             <div mc:edit="std_preheader_links" style="text-align:left;mso-line-height-rule:exactly line-height:100%;font-size:10px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;">
                                                 Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank" style="text-decoration:underline;font-weight:normal;color:#336699;">View it in your browser</a>.
                                                </div>
                                            </td>
           <!-- *|END:IF|* -->
                                        </tr></table>
<!-- // End Module: Standard Preheader  -->
</td>
                            </tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer" style="background-color: #FFFFFF;border-width: 0px;border-collapse: separate;">
<tr>
<td align="center" valign="top" style="background-color: #DDDDDD; border-collapse:collapse;">
                                    <!-- // Begin Template Header  -->
                                 <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" style="border-bottom: 0;background-color: #dddddd;border-collapse: collapse;"><tr>
<td class="headerContent" style="vertical-align:middle;text-align:center;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:34px;font-family:Arial;color:#202020;border-collapse:collapse;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;background-color:#dddddd;border-collapse: collapse;">

                                             <!-- // Begin Module: Standard Header Image  -->
                                             <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_6133508_original_1_.jpg" style="text-decoration:none;line-height:100%;height:auto;border:0;max-width:600px;outline-style:none;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""><!-- // End Module: Standard Header Image  -->
</td>
                                        </tr></table>
<!-- // End Template Header  -->
</td>
                            </tr>
<tr>
<td align="center" valign="top" style="border-collapse:collapse;">
                                    <!-- // Begin Template Body  -->
                                 <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border-collapse: separate;">
<tr mc:repeatable>
<td colspan="3" valign="top" class="bodyContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <div mc:edit="std_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;background-color:#FFFFFF;-webkit-text-size-adjust:none;"><span style="font-size:12px;">Welcome to the first issue of...</span><br>
<br>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor
<hr>
</div>
              </td>
                                                    </tr></table>
<!-- // End Module: Standard Content  -->
</td>
                                      </tr>
<tr>
<td valign="top" width="280" class="leftColumnContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Top Image with Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;">
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image00"><div mc:edit="tiwc300_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	NEW APPOINTMENT
</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</div>
                                                        </td>
                                                    </tr>
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_5757595_original.1.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image00"><div mc:edit="tiwc300_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	title</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</div>
                                                        </td>
                                                    </tr>
</table>
<!-- // End Module: Top Image with Content  -->
</td>
                                         <td valign="top" width="280" class="rightColumnContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Top Image with Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;">
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image01"><div mc:edit="tiwc300_content01" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	NEW APPOINTMENT</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor
</div>
                                                        </td>
                                                    </tr>
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse; background-color: #FFFFFF" ;="">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image01"><div mc:edit="tiwc300_content01" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	TEAM PROFILE</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor </div>
                                                        </td>
                                                    </tr>
</table>
<!-- // End Module: Top Image with Content  -->
</td>
                                        </tr>
<tr mc:repeatable>
<td colspan="3" valign="top" class="bodyContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <div mc:edit="std_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;background-color:#FFFFFF;-webkit-text-size-adjust:none;"><h1 class="h1" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:28px;font-family:Arial;display:block;color:#202020;">
	NEW PROJECTS</h1>
<br>
</div>
              </td>
                                                    </tr></table>
<!-- // End Module: Standard Content  -->
</td>
                                        </tr><tr mc:repeatable>
<td colspan="3" valign="top" class="bodyContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <div mc:edit="std_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;background-color:#FFFFFF;-webkit-text-size-adjust:none;"><h1 class="h1" style="color: #202020;display: block;font-family: Arial;font-size: 24px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;text-transform: uppercase;">
	RECENTLY COMPLETED</h1>
<hr>
</div>
              </td>
                                                    </tr></table>
<!-- // End Module: Standard Content  -->
</td>
                                        </tr>














</table>
<!-- // End Template Body  -->
</td>
                            </tr>













<tr>
<td align="center" valign="top" style="border-collapse:collapse;">
                                    <!-- // Begin Template Footer  -->
                                 <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateFooter" style="background-color: #DDDDDD;border-collapse:collapse;">
<tr>
<td valign="top" class="footerContent" style="border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Footer  -->

































                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#DDDDDD;border-collapse:collapse;">

<tr>
<td colspan="2" valign="left" id="social" style="background-color:#DDDddd;border-collapse:collapse;">
                                                            <div mc:edit="std_social" style="margin-bottom:10px;margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">&nbsp;<a href="*|FORWARD|*" style="text-decoration:underline;font-weight:normal;color:#666;">forward to a friend</a> </div>
                                                        </td>
                                                    </tr>
<tr>
<td valign="top" width="350" style="border-collapse:collapse;">
                                                            <div mc:edit="std_footer" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;"></div>
                                                        </td>
                                                        <td valign="top" width="190" id="monkeyRewards" style="border-collapse:collapse;">
                                                            <div mc:edit="monkeyrewards" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                                                *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
                                                            </div>
                                                        </td>
                                                    </tr>
<tr>
<td colspan="2" valign="middle" id="utility" style="background-color:#DDD;border-collapse:collapse;">
                                                            <div mc:edit="std_utility" style="margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                                                 <a href="*|UNSUB|*" style="text-decoration:underline;font-weight:normal;color:#666;">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*" style="text-decoration:underline;font-weight:normal;color:#666;">update subscription preferences</a>
                                                            </div>
                                                        </td>
                                                    </tr>
</table>
<!-- // End Module: Standard Footer  -->
</td>
                                        </tr>
<tr></tr>
</table>
<!-- // End Template Footer  -->
</td>




























                            </tr>
</table>
<br>
</td>
                </tr></table>
</center>

</td></tr></table>


</body>
</html>
2

Disclaimer… I don’t have Outlook.

Bottom of the page, between the “End Module : Standard Footer” and “End Template Footer” there is an empty row (<tr></tr>).

Try deleting it and see if that helps.

3

Hi ronpat,

Tried that and it hasn’t worked.
Thanks for your suggestion

4

Just to clarify, which bit is the footer? (Could you post a screen shot of what you are seeing?) And what version of Outlook do you have?

Yes, HTML email is a pain. :frowning:

5

How wide is that white line?

6

Hey ralph.m

I believe that the following is the footer, just before the Footer Comment Start Declaration

<tr>
<td align=“center” valign=“top” style=“border-collapse:collapse;”>
<!-- // Begin Template Footer –>
<table border=“0” cellpadding=“0” cellspacing=“0” width=“600” id=“templateFooter” style=“background-color: #DDDDDD;border-collapse:collapse;”>
<tr>
<td valign=“top” class=“footerContent” style=“border-collapse:collapse;”>

                                            &lt;!-- // Begin Module: Standard Footer  --&gt;
                                            
                                            &lt;table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#DDDDDD;border-collapse:collapse;"&gt;

<tr>
<td colspan=“2” valign=“left” id=“social” style=“background-color:#DDDddd;border-collapse:collapse;”>
<div mc:edit=“std_social” style=“margin-bottom:10px;margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;”> <a href=“|FORWARD|” style=“text-decoration:underline;font-weight:normal;color:#666;”>forward to a friend</a> </div>
</td>
</tr>
<tr>
<td valign=“top” width=“350” style=“border-collapse:collapse;”>
<div mc:edit=“std_footer” style=“text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;”></div>
</td>
<td valign=“top” width=“190” id=“monkeyRewards” style=“border-collapse:collapse;”>
<div mc:edit=“monkeyrewards” style=“text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;”>
|IF:REWARDS| |HTML:REWARDS| |END:IF|
</div>
</td>
</tr>
<tr>
<td colspan=“2” valign=“middle” id=“utility” style=“background-color:#DDD;border-collapse:collapse;”>
<div mc:edit=“std_utility” style=“margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;”>
<a href=“|UNSUB|” style=“text-decoration:underline;font-weight:normal;color:#666;”>unsubscribe from this list</a> | <a href=“|UPDATE_PROFILE|” style=“text-decoration:underline;font-weight:normal;color:#666;”>update subscription preferences</a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer –>
</td>
</tr>

</table>
<!-- // End Template Footer –>
</td> </tr>

Umm I can’t upload the files…it starts uploading and then just stops…is 10.2KB too large??

7

I guess it is roughly 1px- the normal line that old outlook tends to apply to newsletters

8

After playing with this all night (used Outlook Express), and reading a few blogs, this seems to be similar to the old Outlook problem (or maybe it never went away). None of the older workarounds (all of which you’ve already employed <grin>) seem to work. Are you obligated to use tableware for the newsletter or can it be constructed with divs? divs set to display:table, display:table-row, and display:table-cell seem to work nicely on my PC; but I have no knowledge of html newsletters.

9

You have to use tables for HTML email layouts for them to work in major clients, unfortunately. I suspect it’s the styling of the divs that is causing the problem, but I don’t have access to Outlook at the moment, so I can’t test the solutions. I’d love to see a screen shot of the problem, though.

10

OK, I managed to test it in Outlook 10, and it looks fine.

11

Thank you ronpat, I really appreciate your time and help on this.

12

The jury is still out with using divs in neswletters it seems. According to Campaign Monitor, you can use divs for certain styling providing they are not used to position elements.
I don’t think that is the issue, I think it is the whole border-collapse:collapse thing…

13

Don’t get why I still see that damn line…
My tests didn’t the white line, but then once I sent the campaign there it was

14

What version of Outlook are you using. As I say, there was no footer problem I could see in Outlook 10.

15

First of all, I think you have a winning handle on the issue. Your achievement reflects a LOT of work.

I put together a simple test page this afternoon just to see what would happen. In my exercise with Outlook Express, the table inserts 1px on the right side and 2px on the bottom of every iteration, which means they are added when tables are nested. And, of coure, table widths are “only a suggestion”; they yield to “hard” content and buggy space. I’m not convinced that it’s a border-collapse problem. It may indeed be, but without border-collapse, the space is far worse. Really seems like an Outlook bug.

In hindsight, the question about using divs was probably dumb.

Remember that I’m not using Outlook. My OS is WinXPPro SP3.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--

You may want to set a URI to an image.  Using a local image doesn't work on my PC */

-->
<head>
    <title>Outlook Table Test</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

body {
    background-color:#bdf;
    text-align:center;
    padding:0px;
    margin:30px;
}
table {
    border-spacing:0px 0px;
    border-collapse:collapse;
    background-color:#fff;
    margin:0px auto;
}
table {border:1px solid #f00;}
table table {border:1px solid #0d0;}
table table table {border:1px solid #44f;}
td {
    background-color:#bfb;
    text-align:center;
    font-size:1px;    /* reduces the extra space at the bottom of the cell to 3px. */
    padding:0px;      /* reduces the extra space at the bottom and right of the cell by 1 more px. */
}
img {
    display:block;
    background-color:#bbb;
    width:398px;      /* image size */
    height:40px;      /* image size */
}

    </style>
</head>
<body>

<table>
<tr>
    <td>
        <table>
        <tr>
            <td>
                <table>
                <tr>
                    <td>
                        <img src="header-replace.gif" alt="">
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>

</body>
</html>

Also, if the problem can be fixed, I think the cause will be found within the section with id=“templateContainer”. Its contents are nested deeper than the footer. The footer is not stretching quite as wide; therefore is showing the white line on the right. In other words, if you use a calibrated screen ruler, you’ll probably find that the Newsletter is a few pixels wider than 600px.

16

Thank you so much!
I am amazed how much time you guys spend on trying to help other out.

I am (kind of glad) that you too see the border I was beginning to think that I am nuts.
The 2px bottom border I don’t see.

I will have to start from scratch and see if I can fix the issue with the overall width.

By the way, and this question applies to all, can you really ever have a perfectly rendered newsletter? Or will the various newsletter clients always have bugs that cause issues?

17

Ooutlook 2010

18

Ah yes, that’s what I meant. I tested it in Outlook2010 and could see no problem. Could you post a screen shot of what you are seeing?

19

The system is not letting me.
It is a 10KB image and it wont upload it

20

Yes, it’s a bit buggy. The way to do it is to click the Go Advanced button (bottom right of a post) and then click Manage Attachments down the screen. That will allow you to upload the image and place it in your post. :slight_smile: