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, 4 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, 4 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, 4 years ago

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

roshodgekiss roshodgekiss, 4 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, 4 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, 4 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, 4 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free