Odd Outlook 2010 layout issues

Get some weird layout issues in outlook 2010, appears to be an errant cell or block object, it only appears when there is long content on the page, this causes the second item to get extra spacing for some reason, tried picking apart the code with no luck, see screee and code below thanks for any help on this.

cheers

Richard

http://www.fish.wa.gov.au/PublishingImages/CM-template.jpg


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
/* Mobile-specific Styles */
@media only screen and (max-device-width: 480px) { 
table[class=w0], td[class=w0] { width: 0 !important; }
table[class=w10], td[class=w10], img[class=w10] { width:10px !important; }
table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
table[class=w20], td[class=w20], img[class=w20] { width:7px !important; }
table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
table[class=w60], td[class=w60], img[class=w60] { width:10px !important; }
table[class=w125], td[class=w125], img[class=w125] { width:80px !important; }
table[class=w130], td[class=w130], img[class=w130] { width:55px !important; }
table[class=w140], td[class=w140], img[class=w140] { width:90px !important; }
table[class=w160], td[class=w160], img[class=w160] { width:180px !important; }
table[class=w170], td[class=w170], img[class=w170] { width:100px !important; }
table[class=w180], td[class=w180], img[class=w180] { width:80px !important; }
table[class=w195], td[class=w195], img[class=w195] { width:80px !important; }
table[class=w220], td[class=w220], img[class=w220] { width:80px !important; }
table[class=w240], td[class=w240], img[class=w240] { width:180px !important; }
table[class=w255], td[class=w255], img[class=w255] { width:185px !important; }
table[class=w265], td[class=w265], img[class=w265] { width:155px !important; }
table[class=w275], td[class=w275], img[class=w275] { width:135px !important; }
table[class=w280], td[class=w280], img[class=w280] { width:135px !important; }
table[class=w300], td[class=w300], img[class=w300] { width:140px !important; }
table[class=w325], td[class=w325], img[class=w325] { width:95px !important; }
table[class=w360], td[class=w360], img[class=w360] { width:140px !important; }
table[class=w380], td[class=w380], img[class=w380] { width:120px !important; }
table[class=w410], td[class=w410], img[class=w410] { width:180px !important; }
table[class=w448], td[class=w448], img[class=w448] { width:190px !important; }
table[class=w470], td[class=w470], img[class=w470] { width:200px !important; }
table[class=w580], td[class=w580], img[class=w580] { width:280px !important; }
table[class=w620], td[class=w640], img[class=w640] { width:300px !important; }
table[class=w640], td[class=w640], img[class=w640] { width:300px !important; }
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] { display:none !important; }
table[class=h0], td[class=h0] { height: 0 !important; }
#headline p { font-size: 30px !important; }
.article-content, #right-sidebar { -webkit-text-size-adjust: 80% !important; -ms-text-size-adjust: 80% !important; }
.header-content,  #issue-date{-webkit-text-size-adjust: 70% !important; -ms-text-size-adjust: 70% !important;}
.footer-content-left, .footer-content-right {-webkit-text-size-adjust: 60% !important; -ms-text-size-adjust: 60% !important;}
img { height: auto; line-height: 100%;}
 } 
/* Client-specific Styles */
#outlook a { padding: 0; }    /* Force Outlook to provide a "view in browser" button. */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body { background-color: #9b9ba3; margin: 0; padding: 0; }
img { outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: blue !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {    color: red !important; }
/* Preferably not the same color as the normal header link color.  There is limited support for psuedo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
/* Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure. */  
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}    /* Body text color for the New Yahoo.  This example sets the font of Yahoo's Shortcuts to black. */
/* This most probably won't work in all email clients. Don't include <code _tmplitem="1627" > blocks in email. */
code {
  white-space: normal;
  word-break: break-all;
}
#background-table { background-color: #9b9ba3; }
/* Webkit Elements */
#top-bar {  -webkit-font-smoothing: antialiased; background-color: #0a3f4b; color: #d9fffd; height:31px}
#top-bar a { font-weight: bold; color: #d9fffd; text-decoration: none;}
#footer { -webkit-font-smoothing: antialiased; }
/* Fonts and Content */
body, td { font-family: verdana, sans-serif; }
.header-content, .footer-content-left, .footer-content-right { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.header-content { font-size: 10px; color: #d9fffd; }
.header-content a {color: #d9fffd; text-decoration: none; }
#right-sidebar .right-column-subhead { font-family: Verdana, sans-serif; font-size: 16px; line-height: 18px; color: #05afef; font-weight: bold; margin-top: 8px; margin-bottom: 16px; }
#right-sidebar .right-column-subhead a { color: #999999; text-decoration:none; }
#right-sidebar .right-column-content { font-family: Verdana, sans-serif; font-size: 12px; line-height: 16px; color: black; margin-top: 0px; margin-bottom: 16px; }
#right-sidebar .right-column-content a { color: #05afef; text-decoration: none; }
.article-title { font-size: 18px; line-height:24px; color: #0083c6; font-weight:bold; margin-top:0px; margin-bottom:18px; font-family: verdana, sans-serif; }
.article-title a { color: #c25130; text-decoration: none; }
.article-content { font-size: 12px; line-height: 18px; color: black; margin-top: 0px; margin-bottom: 18px; font-family: verdana, sans-serif;  }
.article-content a { color: #0083c6; font-weight:bold; text-decoration:none; }
.article-content img { max-width: 100% }
.article-content ol, .article-content ul { margin-top:0px; margin-bottom:18px; margin-left:19px; padding:0; }
.article-content li { font-size: 13px; line-height: 18px; color: #444444; }
.article-content li a { color: #3f6569; text-decoration:underline; }
.article-content p {margin-bottom: 15px;}
.footer-content-left { font-size: 12px; line-height: 15px; color: #d9fffd; margin-top: 0px; margin-bottom: 15px; }
.footer-content-left a { color: #d9fffd; font-weight: bold; text-decoration: none; }
.footer-content-right { font-size: 12px; line-height: 16px; color: #d9fffd; margin-top: 0px; margin-bottom: 15px; }
.footer-content-right a { color: #d9fffd; font-weight: bold; text-decoration: none; }
#footer { background-color: #00558b;}
#footer a { color: #d9fffd; text-decoration: none; font-weight: normal; }
#permission-reminder { white-space: normal; }
#street-address { color: #d9fffd; white-space: normal; }
/* Fisheries Style Edits*/
#date { color: #027297; font-size: 12px; font-weight:bold; padding-left: 22px;}
#nibbles-head {color: white; font-weight:bold; font-size: 18px; font-family: verdana, sans-serif} 
#issue-date{color: #3d3d3d; font-weight:normal; font-size: 12px; font-family: verdana, sans-serif; padding-top: 5px} 
.ii a {
    color: white !important;
}
</style>
<!--[if gte mso 9]>
<style _tmplitem="1627" >
.article-content ol, .article-content ul {
   margin: 0 0 0 24px;
   padding: 0;
   list-style-position: inside;
}
</style>
<![endif]--></head>
<body>
 
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table" style="margin:0px;">
    <tbody>
    
    <tr>
    <td width="100%" align="center">
        
            
            
             <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#0a3f4b" height="31">
                <tbody>
                    <tr>
                     <td class="w15" width="15"></td>
                   
                    <td valign="middle" align="left" height="31"> <div class="header-content"><webversion>Web version</webversion>&nbsp;&nbsp;|&nbsp; <unsubscribe>Unsubscribe</unsubscribe>&nbsp;&nbsp;|&nbsp;<forwardtoafriend>Forward to a friend</forwardtoafriend></div></td>
                
                </tr>
                <tr>        
                    <td bgcolor="#ffffff" height="1" colspan="2" style="font-size: 1px; line-height: 1px;">&nbsp;</td>            
                </tr>   
                
                </tbody>
            </table>
        
    </td></tr>
        
    <tr>
        <td align="center" bgcolor="#9b9ba3" width="100%">
            <table class="w640" style="margin:0 10px;" width="640" cellpadding="0" cellspacing="0" border="0">        
        
            
        
        
        
        
                <tr>
                    
                     <td width="640" class="w640" bgcolor="#00558b"><img width="640" src="/images/masthead.jpg" class="w640" border="0" align="top" style="display: inline" height="176" alt="Catch! - Recreational fishing news from the Department of Fisheries, Western Australia "></td>
                    
                </tr>
                
                
                    
                
    <tr>
        <td align="center">
            
            
                <table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">    
                
                <tr>
                    
                <td class="w10" width="10" bgcolor="#00558b" rowspan="2"></td>
                <td class="w620" width="620" bgcolor="white" valign="top">
                    
                    
                <table class="w620" width="620" cellpadding="0" cellspacing="0" border="0">        
                        
                        
                    <tr>
                        
                        <td width="448" class="w448" valign="top">
                            
                            
                            
                            <table width="448" cellpadding="0" cellspacing="0" border="0" class="w448">        
                            <tr>
                                <td rowspan="3" width="20" class="w20"></td>    
                                <td valign="top" width="398" class="w410" align="right" id="issue-date"><singleline label="Volume Number">Issue no.1</singleline>, <currentmonthname> <currentyear></td>
                                <td rowspan="3" width="30" class="w30"></td>    
                                    
                            </tr>
                            
                            <tr>                                
                                <td valign="top" class="w410" width="397">    
                                    
                                    <repeater>
                                    
                                    <layout label="Text with full width image">                    
                                        <table class="w410" width="397" cellpadding="0" cellspacing="0" border="0">
                                            <tbody><tr>
                                                <td class="w410" width="397">
                                                    <p align="left" class="article-title"><singleline label="Article Title">Add a title</singleline></p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="w410" width="397"><img editable="true" label="Image" class="w410" width="397" border="0"></td>
                                            </tr>
                                            <tr><td class="w410" width="397" height="15"></td></tr>
                                            <tr>
                                                <td class="w410" width="397">
                                                    <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                                </td>
                                            </tr>
                                             <tr>
                                                <td class="w410" width="397"><img editable="true" label="Image footer" class="w410" width="310" border="0"></td>
                                            </tr>
                                            <tr><td class="w410" width="397" height="15"></td></tr>
                                        </tbody></table>
                                 
                                    </layout>
                                        
                                            
                                     <layout label="Text with left-aligned image">
                                        <table class="w410" width="397" cellpadding="0" cellspacing="0" border="0">
                                            <tbody><tr>
                                                <td class="w410" width="397">
                                                    <p align="left" class="article-title"><singleline repeatertitle="true" label="Article Title">Add a title</singleline></p>
                                                    <table cellpadding="0" cellspacing="0" border="0" align="left">
                                                        <tbody><tr>
                                                            <td><img editable="true" label="Image" class="w125" width="124" border="0"></td>
                                                            <td class="w30" width="15"></td>
                                                        </tr>
                                                        <tr><td></td><td class="w15" width="15" height="5"></td></tr>
                                                    </tbody></table>
                                                    <div align="left" class="article-content"><multiline label="Description">Enter your description</multiline></div>
                                                </td>
                                            </tr>
                                            <tr><td class="w410" width="397" height="10"></td></tr>
                                        </tbody></table>
                                    </layout>    
                                            
                                    </repeater>        
                                </td>                                
                            </tr>
                            
                            <tr>                                
                                <td valign="top" height="30" class="w410" width="397"></td>            
                                    
                            </tr>                            
                            </table>
                            
                            
                            
                        </td>    
                        
                        <td width="1" bgcolor="#d7dadc"></td>
                        
                        
                        
                        
                        <td valign="top" class="w170" width="171" id="right-sidebar" bgcolor="#e1f3fc">
                            <table width="171" cellpadding="0" cellspacing="0" border="0" class="w170">        
                            <tr>                        
                                <td bgcolor="#00adef" width="10"></td>
                                <td bgcolor="#00adef" height="28" id="nibbles-head">Nibbles</td>    
                                <td width="11" bgcolor="#00adef"></td>                
                            </tr>
                            <tr>
                        
                                
                                <td bgcolor="#e1f3fc" width="10"></td>
                                <td bgcolor="#e1f3fc">
                                
                                    <repeater>    
                                    <layout label="Text only">
                                      
                                        <p align="left" class="right-column-subhead"><singleline label="Title">Add a title</singleline></p>
                                        <div align="left" class="right-column-content"><multiline label="Description">Enter your description</multiline></div>
                                   
                                    </layout>
                                          
                                    <layout label="Text with image">
                                      
                                        <p align="left" class="right-column-subhead"><singleline label="Title">Add a title</singleline></p>
                                        <div align="left" class="right-column-content"><multiline label="Description">Enter your description</multiline></div>
                                        <div align="left" class="right-column-content"><img editable="true" label="Image" class="w140" width="140" border="0"></div>
                                   
                                    </layout>               
                                   
                                </repeater>
                                
                                    
                                    
                                </td>
                            
                                <td width="11" bgcolor="#e1f3fc"></td>
                            </tr>
                        
                            <tr>
                                <td height="30" bgcolor="#e1f3fc" colspan="3" width="171" class="w170"></td>
                                
                            </tr>
                                                        
                            </table>
                            
                            
                            
                        </td>    
                        
                        
                    </tr>    
                    
                    <tr>
                        
                        <td colspan="3" height="8" bgcolor="#fb9235" class="w620" width="620"></td>
                        
                    </tr>
                </table>                
                                
                
                </td>
                
                <td class="w10" width="10" bgcolor="#00558b" rowspan="2"></td>    
                    
                </tr>
                
                
                
                <tr>
                    
                    <td class="w620" width="620">
        
                          <table id="footer" class="w620" bgcolor="#00558b" border="0" cellpadding="0" cellspacing="0" width="620">
                            <tbody><tr><td class="w380" height="15" width="380"></td><td class="w170" width="240"></td></tr>
                                <tr>
                                   
                                    <td valign="top" class="w380" width="380">
                                    <p id="permission-reminder" class="footer-content-left" align="left">You are receiving this because you have subscribed to our mailing list. You can <unsubscribe>unsubscribe</unsubscribe> at any time. </p>
                                    
                                     <p class="footer-content-left" align="left">&copy; <currentyear> Department of Fisheries. All rights reserved<br>
 
                                     <a href="http://www.fish.wa.gov.au/Pages/Disclaimer.aspx">Disclaimer</a> | <a href="http://www.fish.wa.gov.au/Fishing-and-Aquaculture/Recreational-Fishing/Catch-E-Newsletter/Pages/default.aspx">Subscribe to this newsletter</a><br>
 <preferences>Edit your subscription</preferences></p>
                                    </td>
                                    
                                    <td valign="top" class="w170" width="240">
                                    <p id="street-address" class="footer-content-right" align="right">Department of Fisheries<br>
                        168 St George's Terrace,<br>
                        Perth WA, 6000<br>
                        T: <a>(08) 9203 0111</a><br>
                        E: <a href="mailto:communications@fish.wa.gov.au">communications@fish.wa.gov.au</a><br>
                        ABN: 55 689 794 771
                        </p>
                                    </td>
                                    
                                </tr>
                                
                                <tr><td colspan="2">
                                    
                                   <table class="w620" border="0" cellpadding="0" cellspacing="0" width="620">            
                                     <tr>
                                         <td width="264" class="w265" align="left" id="fisheries-logo"><img src="/images/dof-logo.gif" alt="Department of Fisheries WA" border="0" height="47" width="264" class="w265"></td>
                                         <td width="135" class="w140" align="right" id="fishforthefuture"><img src="/images/fish-for-the-future.gif" border="0" width="135" height="22" alt="fish for the future" class="w140"></td>
                                     </tr>            
                                </table>        
                                    
                                </td></tr>
                                
                                
                                
                                <tr><td height="15" colspan="2"></td></tr>
                                
                            </tbody></table>
                
                        
                        
                    </td>
                    
                </tr>
                
                
            </table>
            
            
        </td>
    </tr>
    
    
    
    
            </table>
    
    
    
    
    
    
    
    
    </td></tr></tbody>
</table>
    
    
    
</body></html>
roshodgekiss roshodgekiss, 3 years ago

Hi fishwa, without seeing the live campaign, I have a pretty good hunch that this gap is being caused by the classic Outlook 2007/2010 'page break' issue. Our friends at Email on Acid have an excellent blog post which describes this issue in detail and suggests multiple workarounds, so I'd first recommend giving it a read.

If symptoms persist after applying these fixes, please pop our team a line (pardon the pun) with campaign details and we'll do our best to help out, as well. Sorry there isn't a silver bullet to be seen here, but we hope EoA's workarounds do the trick! Either way, let us know how you go.


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

Hi much thanks for the link, wouldn't have picked this up in a milltion years, typical MS hey :(

I have tried some of the options with no luck, I have dropped the team an email and await the response, I have toes and fingers crossed.

Thanks

Richard

roshodgekiss roshodgekiss, 3 years ago

Hi Richard, typical MS! It looks like Fi on our team got back to you last week with a fix via email - by all means pop us an email if there's anything else we can assist with here. Have a great week ahead!


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