SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    HTML 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. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,537
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    Hi ronpat,

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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,537
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    How wide is that white line?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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;">

    <!-- // 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>

    </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. #7
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    How wide is that white line?
    I guess it is roughly 1px- the normal line that old outlook tends to apply to newsletters

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,537
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    OK, I managed to test it in Outlook 10, and it looks fine.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    Thank you ronpat, I really appreciate your time and help on this.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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. #13
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, I managed to test it in Outlook 10, and it looks fine.
    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. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    What version of Outlook are you using. As I say, there was no footer problem I could see in Outlook 10.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,537
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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.
    Code:
    <!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.
    Last edited by ronpat; Oct 11, 2012 at 18:24. Reason: Add to message

  16. #16
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    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.
    Code:
    <!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.

    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. #17
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    What version of Outlook are you using. As I say, there was no footer problem I could see in Outlook 10.
    Ooutlook 2010

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by milkandhoney View Post
    Outlook 2010
    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. #19
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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?
    The system is not letting me.
    It is a 10KB image and it wont upload it

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  21. #21
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Attachment of problem
    Attached Images Attached Images

  22. #22
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Attached

  23. #23
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,537
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    When writing for a newsletter like this, does all of the styling have to be written in-line, or can some be in a css section?

  24. #24
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    When writing for a newsletter like this, does all of the styling have to be written in-line, or can some be in a css section?
    I am no expert, but from what I have read, it should be all inline and tables. Some experts say that CSS and DIVs can be used, but for those email clients that ignore anything between the <style> tags you should have the inline, which is a loooot of work.
    I use the mailchimp inliner tool.

    I think I can live with this line showing, I suppose you cannot have a perfectly rendered newsletter on all email clients, but now my main issue is the fact that this newsletter, or rather the basic template I worked off, is not fluid...so now adding the media queries and am about to test it

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    When writing for a newsletter like this, does all of the styling have to be written in-line, or can some be in a css section?
    Some email clients strip out all styles in the Head ( ) so to be sure, it all needs to be inline. It's incredible that this is still the case in this age, but there you go. On other fronts, email is even going backwards, thanks to Microsoft's decision to base email around Word rendering rather than HTML standards.

    Quote Originally Posted by milkandhoney View Post
    I think I can live with this line showing, I suppose you cannot have a perfectly rendered newsletter on all email clients
    Yes, it's not that bad. I'm not at my main computer right now, but from memory, the mail chimp image was not linked in the code you posted, which is probably why I'm not seeing the line in Outlook.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •