Tried Everything! Please Help! :)

Hello,

First of all, thank you in advance with any help you can give to me on this issue! This is not a bug with CampaignMonitor . The issue that I am having is getting a simple email layout to render correctly on a single machine! (Unfortunately that machine happens to be my client's Client's machine!). I am hoping that someone could look at the code and see what might be throwing the layout out of whack!

First let me give you the background. My client's Client is running a PC with (you guessed it!) Outlook 2007. I have tested the code in all browsers and it looks correct (even ie5.2 on the Mac!). I have run all the layout variations through your testing service and for the most part they look right on. I have sent the email to others I know who have upgraded to 2007 Outlook and it looks fine on their machine. I have tested the layouts on a third party email testing site  (emailonacid.com) and it renders as it should. For some reason it falls apart in my client's Client's Outlook 2007. I have done everything I can think of doing, including even removing all of the blank space within the code, but to no avail!

The layout is very simple. It consists of a containing table set to 100% with the align=center set to center the inner containing table. Inside this is another table, single cell to contain all of the remaining stacked tables. The header, content, signature, footer and CampaignMonitor links tables are all stacked and nested within this inner containing table.

The header and footer tables are single column, single row tables containing images, and they render just fine.

The main content table is 5 columns, 1 row with the inner column holding the content and two rows on either side of that holding colored spacers with the columns filled with matching colors to create an outlined effect on the background. The Signature table is basically the same with two columns for content in the center to allow for spacing of the signature content on the left and a logo on the right. It is these two tables that seem to shorten in width so that they jog in from the right and do not line up with the header and footer images.

You can access a screen shot from the "Client's Client's" machine at http://www.image-odyssey.com/filice-12.14.pdf a screen shot of how it should look can be accessed at http://www.image-odyssey.com/filiceGood-Top.pdf and http://www.image-odyssey.com/filiceGood-bottom.pdf

Here is the code of the template (at least the one with line spacing still in)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Filice Insurance Presents :: New Legislative Changes</title>
<style type="text/css">
<!--
a {
    color:rgb(148,156,80); text-decoration:none;
}

p {
    font-family: Gill Sans, Arial, Helvetica, sans-serif; font-size:11pt;line-height:1.5em; color:rgb(125,106,85); margin-top:0px; margin-right:30px; margin-bottom:20px; margin-left:35px;
}

h1 {
    font-family: Gill Sans, Arial, Helvetica, sans-serif;font-size:17pt;font-weight:bold; line-height:1.5em; color:rgb(191,46,26);margin-top:25px; margin-right:25px; margin-bottom:20px;  margin-left:35px;
}

h2 {
    font-family: Gill Sans, Arial, Helvetica, sans-serif; font-size:12pt; font-weight:bold; line-height:1.2em; color:rgb(148,156,80); margin-top:25px; margin-right:25px; margin-bottom:0px; margin-left:35px;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
<style type="text/css">
<!--
img {display:block;}
-->
</style>
</head>
<body style="margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;">

<!-- Begin Outside Container Table -->

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color: rgb(125,106,85);    margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: 'Gill Sans', Arial, Helvetica, sans-serif; font-size: small;">
    <tr>
        <td>
        
        <!-- Begin Wrapper Table -->
        
        <table width="742" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="742">
                    
                    <!-- Begin Header Table -->
                    
                    <table width="742" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td align="left" valign="top"><div align="left"><img src="images/filice1ColHeader.jpg" width="742" height="276" alt="Filice " border="0"></div>
                                </td>
                            </tr>
                        </table>
                        
                    <!-- End Header Table -->
                        
                    <!-- Begin Main Content Table -->
                        
                        <table width="742" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="21" bgcolor="#7E6A57"><img src="images/wrmGreySpacer.jpg" alt="Spacer" width="21" height="21" border="0"></td>
                                <td width="1" bgcolor="#604709"><img src="images/dkGreySpacer.jpg" alt="Spacer" width="1" height="21" border="0"></td>
                                <td width="698" align="left" valign="top" bgcolor="#FFFFFF">
                                
                                <!-- Begin CM Content -->
                                
                                <p style="font-size:11pt; line-height:1.5em; color:rgb(125,106,85); margin-top:25px; margin-right:25px; margin-bottom:15px; margin-left:35px;">
                                        <$currentmonthname$>
                                        <$currentday$>, 
                                        <$currentyear$>
                                    </p>
                                    <h1 style="font-size:17pt; font-weight:bold; line-height:1.5em; color:rgb(191,46,26); margin-top:25px; margin-right:25px; margin-bottom:20px;  margin-left:35px;">
                                        <$title default='New Legislative Changes'$>
                                    </h1>
                                    <p style="font-size:11pt; line-height:1.5em; color:rgb(125,106,85); margin-top:5px; margin-right:25px; margin-bottom:20px; margin-left:35px;">
                                        <$title default='Hi Everyone,'$>
                                    </p>
                                    <$description default='<p style="font-size:11pt; line-height:1.5em; color:rgb(125,106,85); margin-top:20px; margin-right:30px; margin-bottom:0px;  margin-left:35px;" id="intro">There
                                        is a lot going on legislatively so I put together a very high level
                                        overview of the major changes this month and have posted more extensive
                                        Legislative Briefs on your My Filice site at <a href="https://www.mywaveportal.com" target="_blank" style="color:rgb(148,156,80); text-decoration:none;">https://www.mywaveportal.com</a>.</p>'$> 
                                        <br />
                                    <repeater>
                                    
                                    <h2 style="font-size:12pt; font-weight:bold; line-height:1.2em; color:rgb(148,156,80); margin-top:0px; margin-right:25px; margin-bottom:0px; margin-left:35px;">
                                    <$title default='New Poster Requirement'$></h2>
                                        
                                <$description default='<p style="font-size:11pt; line-height:1.5em; color:rgb(125,106,85); margin-top:0px; margin-right:30px; margin-bottom:20px; margin-left:35px;">The
                                        EEOC has revised its Equal Employment Opportunity is the Law poster.
                                        The new version reflects current federal employment discrimination
                                        law including the Americans with Disabilities Act Amendments Act of
                                        2008. The poster was revised to add information about the Genetic
                                        Information Nondiscrimination Act and also includes updates from the
                                        Department of Labor. </p>'$>
                                        
                                    </repeater>
                                    
                                    <!-- End CM Content -->
                                    
                            <p style="font-size:11pt; line-height:1.5em; color:rgb(125,106,85); margin-top:0px; margin-right:30px; margin-bottom:20px; margin-left:35px;">For
                                        more information on any of these topics,
                                feel free to contact any member of the Filice Compliance Team or go
                                to your My Filice site at <a href="https://www.mywaveportal.com" target="_blank" style="color:rgb(148,156,80); text-decoration:none;">https://www.mywaveportal.com</a>.
                                        If you don&acute;t know your username and password, just click retrieve
                                        your login information and the system
                                        will send it to you.</p> 
                                <p style="font-size:11pt; line-height:1.2em; color:rgb(125,106,85); margin-top:0px; margin-right:25px; margin-bottom:0px; margin-left:35px;">Have
                                a great day!</p></td>
                                        
                                <td width="1" bgcolor="#604709"><img src="images/dkGreySpacer.jpg" alt="Spacer" width="1" height="21" border="0"></td>
                                <td width="21" bgcolor="#7E6A57"><img src="images/wrmGreySpacer.jpg" alt="Spacer" width="21" height="21" border="0"></td>
                            </tr>
                        </table>
                        
                    <!-- End Main Content Table -->
                        
                        <!-- Begin Signature Table -->
                        
                        <table width="742" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="21" bgcolor="#7E6A57"><img src="images/wrmGreySpacer.jpg" alt="Spacer" width="21" height="21" border="0"></td>
                                <td width="1" bgcolor="#604709"><img src="images/dkGreySpacer.jpg" alt="Spacer" width="1" height="21" border="0"></td>
                                <td width="445" align="left" valign="bottom" bgcolor="#FFFFFF"><p style="font-size:11pt; font-weight:bold; line-height:1.2em; color:rgb(125,106,85); margin-top:25px; margin-right:25px; margin-bottom: 25px; margin-left:35px;">Your
                                        Filice Compliance Team &mdash;</p>
                                    <p style="font-size:10pt; line-height:1.5em; color:rgb(125,106,85); margin-top:0px; margin-right:0px; margin-bottom: 25px; margin-left:35px;"> Jessica
                                        Sutton &ndash; <a href="mailto:jessica@filice.com" style="color:rgb(148,156,80); text-decoration:none;">jessica@filice.com</a> or
                                        408.350.5748<br>
                                        Michelle Montoya &ndash; <a href="mailto:michelle@filice.com" style="color:rgb(148,156,80); text-decoration:none;">michelle@filice.com</a> or
                                        408.350.5776<br>
                                        Dawn Alvarez &ndash; <a href="mailto:dawn@filice.com" style="color:rgb(148,156,80); text-decoration:none;">dawn@filice.com</a> or
                                        408.350.5713<br>
                                        Edie Thompson &ndash; <a href="mailto:edie@filice.com" style="color:rgb(148,156,80); text-decoration:none;">edie@filice.com</a> or
                                        916-935-9717</p>
                                <br></td>
                                <td width="253" align="right" valign="bottom" bgcolor="#FFFFFF"><p style=" margin-top:5px; margin-right:35px; margin-bottom: 40px; margin-left:0px;"><img src="images/Filice1ColComplianceBug.jpg" alt="Filice HR Compliance: Value. Unsurpassed." width="217" height="41" border="0"></p></td>
                                <td width="1" bgcolor="#604709"><img src="images/dkGreySpacer.jpg" alt="dkGreySpacer" width="1" height="21" border="0"></td>
                                <td width="21" bgcolor="#7E6A57"><img src="images/wrmGreySpacer.jpg" alt="Spacer" width="21" height="21" border="0"></td>
                            </tr>
                        </table>
                        
                        <!-- End Signature Table -->
                        
                        <!-- Begin Footer Table -->
                        
                        <table width="742" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td><img src="images/Filice1ColFooter.jpg" alt="Filice HR Complience. Value. Unsurpassed." width="742" height="47"></td>
                            </tr>
                        </table>
                        
                        <!-- End Footer Table -->
                        
                        <!-- Begin CM Controls Table -->
                        
                        <table width="742" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="240" align="left" valign="top"><unsubscribe><p style="font-size:10pt; line-height:1.2em; color:#ffffff; margin-top:0px; margin-right:0px; margin-bottom: 10px; margin-left:25px;padding:0px;">Unsubscribe?</p></unsubscribe></td>
        <td width="262" align="center" valign="top"><webversion><p style="font-size:10pt; line-height:1.2em; color:#ffffff; margin-top:0px; margin-right:0px; margin-bottom: 10px; margin-left:0px; padding:0px;">Click to View in Browser</p></webversion></td>
        <td width="240" align="right" valign="top"><forwardtoafriend><p style="font-size:10pt; line-height:1.2em; color:#ffffff; margin-top:0px; margin-right:25px; margin-bottom: 10px; margin-left:0px; padding:0px;">Forward to a Collegue?</p>
        </forwardtoafriend>            </td>
    </tr>
</table>

<!-- Begin CM Controls Table -->
                        
                        
                    </td>
                </tr>
            </table>
            
        <!-- End Wrapper Table -->
        
        </td>
    </tr>
</table>

<!-- End Outside Container Table -->

</body>
</html>

Any help would be monumentally appreciated as I have tried everything I know and still I can't get it to work on her machine. AAHRGHHH!

David Brix
david@image-odyssey.com

This is no longer urgent, although I am curious what might be going on...

I completely recoded the page using nested tables instead of multi column layouts and the client's client still had problems with the layout. In any case, others in her office were viewing it fine so we have moved on. Learned a lot although never figured out what the problem was with her particular machine.

If anyone can look at my code and offer suggestions I am always open to learning!

Regards,

David Brix

roshodgekiss roshodgekiss, 6 years ago

Hi David,

I've had a quick look at your code and suspect that your spacer images may be playing a part in this. You can achieve the same layout without spacer images by nesting a table and using align="center". Here's a sample of how I would tweak your Main Content Table to achieve this:

<!-- Begin Main Content Table -->
                         
                        <table width="698" border="0" cellspacing="0" cellpadding="0" align="center">
                            <tr>
                                <td width="698" align="left" valign="top" bgcolor="#FFFFFF" style="border-left: 1px solid #604709; border-right: 1px solid #604709;">
                                
                                <!-- Begin CM Content -->
                                
                                <p style="font-size:11pt; line-height:1.5em; color:rgb(125,106,85); margin-top:25px; margin-right:25px; margin-bottom:15px; margin-left:35px;">
                                        <$currentmonthname$>
                                        <$currentday$>, 
                                        <$currentyear$>...
                                    
                                    <!-- End CM Content -->
                                    
                            <p style="font-size:11pt; line-height:1.5em; color:rgb(125,106,85); margin-top:0px; margin-right:30px; margin-bottom:20px; margin-left:35px;">For
                                        more information on any of these topics,
                                feel free to contact any member of the Filice Compliance Team or go
                                to your My Filice site at <a href="https://www.mywaveportal.com" target="_blank" style="color:rgb(148,156,80); text-decoration:none;">https://www.mywaveportal.com</a>.
                                        If you don&acute;t know your username and password, just click retrieve
                                        your login information and the system
                                        will send it to you.</p> 
                                <p style="font-size:11pt; line-height:1.2em; color:rgb(125,106,85); margin-top:0px; margin-right:25px; margin-bottom:0px; margin-left:35px;">Have
                                a great day!</p></td>
                            </tr>
                        </table>
                        
<!-- End Main Content Table -->

As you can see, I've stripped the columns with spacer images. I try to avoid them as they've personally caused me unexpected problems in the past.

The links to your final designs don't seem to be working, so do let me know if we can assist you further. All the best with your email, it looks great! I'm sure your client will be impressed :)


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

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