Menu icon Foundation
Ink columns in Outlook issue

Hi there!

I've got a problem with a two column row with Outlook. If I use two a row with two columns, the container is stretched above the width of 580px and because of that the right edge of the picture is not on the same line as the white container, as you can see on the screenshot. The screenshot is taken with Outlook 2013, but the issue occurs also with other versions.

I use Ink 1.0.5.

Is there any known solution for this issue?

Thanks

2015 03 19 154333

 <body style="background: #e6e6e6">
        <table class="body" height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td class="center" align="center" valign="top">
                    <center>
                        <table class="container" width="580">
                            <tr>
                                <td>
                                    <table class="row" style=" background: #fff;" width="580">
                                        <tr>
                                            <td class="wrapper" style="padding-bottom:30px;">

                                                <table class="six columns">
                                                    <tr>
                                                        <td>
                                                            <a href="#">
                                                                <img alt="alt" src="http://placehold.it/580x380/" width="280"  />
                                                            </a>
                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last" style="padding-bottom:30px;">
                                                <table class="six columns">
                                                    <tr >
                                                        <td>
                                                            <a href="#">
                                                                <img src="http://placehold.it/580x380/" width="280"  >
                                                            </a>
                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>
                                            </td>

                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                    </center>
                </td>
            </tr>
        </table>
    </body>
            

         

Outlookink

Hi there!

I've got a problem with a two column row with Outlook. If I use two a row with two columns, the container is stretched above the width of 580px and because of that the right edge of the picture is not on the same line as the white container, as you can see on the screenshot. The screenshot is taken with Outlook 2013, but the issue occurs also with other versions.

I use Ink 1.0.5.

Is there any known solution for this issue?

Thanks

2015 03 19 154333

 <body style="background: #e6e6e6">
        <table class="body" height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td class="center" align="center" valign="top">
                    <center>
                        <table class="container" width="580">
                            <tr>
                                <td>
                                    <table class="row" style=" background: #fff;" width="580">
                                        <tr>
                                            <td class="wrapper" style="padding-bottom:30px;">

                                                <table class="six columns">
                                                    <tr>
                                                        <td>
                                                            <a href="#">
                                                                <img alt="alt" src="http://placehold.it/580x380/" width="280"  />
                                                            </a>
                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last" style="padding-bottom:30px;">
                                                <table class="six columns">
                                                    <tr >
                                                        <td>
                                                            <a href="#">
                                                                <img src="http://placehold.it/580x380/" width="280"  >
                                                            </a>
                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>
                                            </td>

                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                    </center>
                </td>
            </tr>
        </table>
    </body>
            

         

This post has been closed. No new replies can be added.

Adam Foale over 4 years ago

Hey Alexander,

I have the same problem. Our template works fine in all clients except for outlook.

I found the following link which refers to conditional statements for Outlook.

http://engineering.aweber.com/coding-responsive-emails-that-work/

Our original template worked fine in Outlook, but we started having problems when we started to use 'retina' images. In other words, images that were double the size in pixels of their intended placement.

Using the conditional statements and setting the container table width to a hard 600 pixels seems to have resolved this for us.

Adam

Alexander Martens over 4 years ago

Hi Adam,

thanks a lot! Setting the container width for Outlook helps solving this issue.