Outlook 2010 Issue with Responsive Tables

Hi,

I'm having some problem with my email not displaying correctly in outlook 2010. I have coded a responsive template which is working fine when viewed in yahoo, outlook.com, AOL, Gmail, IPhone etc.

In Outlook 2010 columns are not aligned.

Here is the screenshot:

https://i1.createsend1.com/ei/j/E9/795/84E/csimport/122.024811.png


Here is the code:

<table width="300" border="0" cellspacing="0" cellpadding="0" align="left" bgcolor="#FFFFFF">
            <tr>
                <td width="300" align="center" valign="top" style="vertical-align:top !important;" valign="top">
                    <img border="0" src="images/blogpost_img_i.jpg" alt="" 
                    width="300" height="225">
                </td>
            </tr>
            <tr>
                <td border="0" class="promocell" style="padding:20px;" valign="top">
                    <h4 class="secondary">
                        <a href="#" target="_blank" style="text-decoration:none !important;">
                            FC Bayern München - Vfl Wolfsburg mit Besuch am Oktoberfest (Rollver)
                        </a>
                    </h4>
                    
                    <h5 class="dateitem">5. September 2013</h5>
                    
                    <p>
                        Ein unterhaltsamer Nachmittag auf dem Oktoberfest München und ein spannender Abend in der Allianz Arena, dass alles erwartet Sie an diesem Tag. 
                    </p>
                </td>
            </tr>
        </table>
        
        <table width="20" border="0" cellspacing="0" cellpadding="0" align="left" class="hide">
            <tr>
                <td><img border="0" src="http://www.loremipsum.net/pixelgif/pics/pixel.gif" width="20" height="1" class="hide"></td>
            </tr>
        </table>
        
        <table width="300" border="0" cellspacing="0" cellpadding="0" align="left" bgcolor="#FFFFFF">
            <tr>
                <td width="300" align="center" valign="top" style="vertical-align:top !important;" valign="top">
                    <img border="0" src="images/blogpost_img_ii.jpg" alt="" 
                    width="300" height="225">
                </td>
            </tr>
            <tr>
                <td border="0" class="promocell" style="padding:20px;" valign="top">
                    <h4 class="secondary">
                        <a href="#" target="_blank" style="text-decoration:none !important;">
                            Borussia Dortmund - Werder Bremen im Signal Iduna Stadion
                        </a>
                    </h4>
                    
                    <h5 class="dateitem">5. September 2013</h5>
                    
                    <p>
                        Ein unterhaltsamer Nachmittag auf dem Oktoberfest München und ein spannender Abend in der Allianz Arena, dass alles erwartet Sie an diesem Tag. 
                    </p>
                </td>
            </tr>
        </table>
mtkhan mtkhan, 3 years ago

I have got it working but now when I add more articles jut by copying the code, I get the same spacing issue.

https://i2.createsend1.com/ti/j/33/9EE/35A/222123/images/13.171955.jpg

I'm only experiencing this issue with 3rd row second column only (2 articles/row). If I add more rows they'll look good.

Here is the complete code:

https://docs.google.com/document/d/1g3K … sp=sharing

roshodgekiss roshodgekiss, 3 years ago

Hi there mtkahn, we've come across very similar issues with Outlook 2010 before - a page break bug, which can often be fixed by placing each article row into a separate table. Having all your content nested in one large container table almost always triggers this behaviour.

Thanks, mtkahn - 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
mtkhan mtkhan, 3 years ago

Wow, you've made my day roshodgekiss. Perfectly done. Problem solved.

roshodgekiss roshodgekiss, 3 years ago

You're very welcome :D


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

Hi roshodgekiss,

Now I'm facing the problem with Apple Mail 5 & Outlook 2011.

Here is the screenshot:

Outlook/Apple Mail 5 Screenshot

Here is the updated code for the block:

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eaeff3" align="center">
    <tr>
        <td bgcolor="#eaeff3" width="100%" valign="top" style="vertical-align:top !important;" align="center">
            <table width="620" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
                <tr>
                    <td width="620" class="cell" valign="top" align="center">
                        <table width="620" border="0" cellspacing="0" cellpadding="0" class="table" align="center">
                            <tr>
                                <td width="620" class="cell" align="center">        <!--This is First Article Row-->
                                <table width="300" border="0" cellspacing="0" cellpadding="0" class="table" align="left">
                                    <tr>
                                        <td width="300" align="center" class="cell">
                                            <img border="0" src="images/blogpost_img_ii.jpg" alt="" width="300" height="225">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="300" style="padding:20px;" valign="top" bgcolor="#FFFFFF" class="cell" align="center" >
                                            <h3 class="secondary" align="left">
                                            <a href="#" target="_blank" style="text-decoration:none !important;">
                                            FC Bayern München - Vfl Wolfsburg mitst (Rollver)
                                            </a>
                                            </h3>
                                            <h5 class="dateitem" align="left">5. September 2013</h5>
                                            <p class="contents" align="left">
                                            Ein unterhaltsamer Nachmittag auf dem Oktoberfest München und ein spannender Abend in der Allianz Arena, dass alles erwartet Sie an diesem Tag.
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                                <table width="300" border="0" cellspacing="0" cellpadding="0" class="table" align="right">
                                    <tr>
                                        <td width="300" align="center" class="cell" >
                                            <img border="0" src="images/blogpost_img_i.jpg" alt="" width="300" height="225">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="300" style="padding:20px;" valign="top" bgcolor="#FFFFFF" class="cell" align="center" >
                                            <h3 class="secondary" align="left">
                                            <a href="#" target="_blank" style="text-decoration:none !important;">
                                            FC Bayern München - Vfl Wolfsburg mitst (Rollver)
                                            </a>
                                            </h3>
                                            <h5 class="dateitem" align="left">5. September 2013</h5>
                                            <p class="contents" align="left">
                                            Ein unterhaltsamer Nachmittag auf dem Oktoberfest München und ein spannender Abend in der Allianz Arena, dass alles erwartet Sie an diesem Tag.
                                            </p>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td bgcolor="#eaeff3" class="hide">
                                <img border="0" src="http://www.loremipsum.net/pixelgif/pics/pixel.gif" width="1" height="15" class="hide">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

Complete Code (Updated)

Redferret, 3 years ago

Hi mkthan, most of your tables in that code are center aligned so won't sit next to each other


Gmail app apologist
roshodgekiss roshodgekiss, 3 years ago

Redferret is right - if you remove align="center" wherever possible, you will likely have better luck with this.


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