Menu icon Foundation
Ink - Mail content not centered and custom styles not working in Outlook 2007 and up

Hi,

I tried to create a HTML newsletter template as described in the Ink documentation and used the Ink inliner to inline the css code. However, something seems to be wrong with my code. The content is not centered in all Outlook versions and also all my custom styling is missing when opening the mail in Outlook 2007 or higher.

It looks great in other clients! Maybe you could help me and tell me what I'm doing wrong? Thanks!

Edit: The first screenshot shows the template correctly rendered in Apple Mail, the second one is how it looks in Outlook 2007.

Apple mail

Outlook

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">

/**********************************************
* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
**********************************************/

/* Client-specific Styles & Reset */

#outlook a {
    padding: 0;
}

body {
    width: 100%!important;
    min-width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}

.ExternalClass {
    width: 100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
    line-height: 100%;
}

#backgroundTable {
    margin: 0;
    padding: 0;
    width: 100%!important;
    line-height: 100%!important;
}

img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
    width: auto;
    max-width: 100%;
    float: left;
    clear: both;
    display: block;
}

center {
    width: 100%;
    min-width: 580px;
}

a img {
    border: none;
}

p {
    margin: 0 0 0 10px;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    border-collapse: collapse!important;
}

table, tr, td {
    padding: 0;
    vertical-align: top;
    text-align: left;
}

hr {
    color: #d9d9d9;
    background-color: #d9d9d9;
    height: 1px;
    border: none;
}

/* Responsive Grid */

table.body {
    height: 100%;
    width: 100%;
}

table.container {
    width: 580px;
    margin: 0 auto;
    text-align: inherit;
}

table.row {
    padding: 0px;
    width: 100%;
    position: relative;
}

table.container table.row {
    display: block;
}

td.wrapper {
    padding: 10px 20px 0px 0px;
    position: relative;
}

table.columns,
table.column {
    margin: 0 auto;
}

table.columns td,
table.column td {
    padding: 0px 0px 10px;
}

table.columns td.sub-columns,
table.column td.sub-columns,
table.columns td.sub-column,
table.column td.sub-column {
    padding-right: 10px;
}

td.sub-column, td.sub-columns {
    min-width: 0px;
}

table.row td.last,
table.container td.last {
    padding-right: 0px;
}

table.one {
    width: 30px;
}

table.two {
    width: 80px;
}

table.three {
    width: 130px;
}

table.four {
    width: 180px;
}

table.five {
    width: 230px;
}

table.six {
    width: 280px;
}

table.seven {
    width: 330px;
}

table.eight {
    width: 380px;
}

table.nine {
    width: 430px;
}

table.ten {
    width: 480px;
}

table.eleven {
    width: 530px;
}

table.twelve {
    width: 580px;
}

table.one center {
    min-width: 30px;
}

table.two center {
    min-width: 80px;
}

table.three center {
    min-width: 130px;
}

table.four center {
    min-width: 180px;
}

table.five center {
    min-width: 230px;
}

table.six center {
    min-width: 280px;
}

table.seven center {
    min-width: 330px;
}

table.eight center {
    min-width: 380px;
}

table.nine center {
    min-width: 430px;
}

table.ten center {
    min-width: 480px;
}

table.eleven center {
    min-width: 530px;
}

table.twelve center {
    min-width: 580px;
}

table.one .panel center {
    min-width: 10px;
}

table.two .panel center {
    min-width: 60px;
}

table.three .panel center {
    min-width: 110px;
}

table.four .panel center {
    min-width: 160px;
}

table.five .panel center {
    min-width: 210px;
}

table.six .panel center {
    min-width: 260px;
}

table.seven .panel center {
    min-width: 310px;
}

table.eight .panel center {
    min-width: 360px;
}

table.nine .panel center {
    min-width: 410px;
}

table.ten .panel center {
    min-width: 460px;
}

table.eleven .panel center {
    min-width: 510px;
}

table.twelve .panel center {
    min-width: 560px;
}

.body .columns td.one,
.body .column td.one {
    width: 8.333333%;
}

.body .columns td.two,
.body .column td.two {
    width: 16.666666%;
}

.body .columns td.three,
.body .column td.three {
    width: 25%;
}

.body .columns td.four,
.body .column td.four {
    width: 33.333333%;
}

.body .columns td.five,
.body .column td.five {
    width: 41.666666%;
}

.body .columns td.six,
.body .column td.six {
    width: 50%;
}

.body .columns td.seven,
.body .column td.seven {
    width: 58.333333%;
}

.body .columns td.eight,
.body .column td.eight {
    width: 66.666666%;
}

.body .columns td.nine,
.body .column td.nine {
    width: 75%;
}

.body .columns td.ten,
.body .column td.ten {
    width: 83.333333%;
}

.body .columns td.eleven,
.body .column td.eleven {
    width: 91.666666%;
}

.body .columns td.twelve,
.body .column td.twelve {
    width: 100%;
}

td.offset-by-one {
    padding-left: 50px;
}

td.offset-by-two {
    padding-left: 100px;
}

td.offset-by-three {
    padding-left: 150px;
}

td.offset-by-four {
    padding-left: 200px;
}

td.offset-by-five {
    padding-left: 250px;
}

td.offset-by-six {
    padding-left: 300px;
}

td.offset-by-seven {
    padding-left: 350px;
}

td.offset-by-eight {
    padding-left: 400px;
}

td.offset-by-nine {
    padding-left: 450px;
}

td.offset-by-ten {
    padding-left: 500px;
}

td.offset-by-eleven {
    padding-left: 550px;
}

td.expander {
    visibility: hidden;
    width: 0px;
    padding: 0!important;
}

table.columns .text-pad,
table.column .text-pad {
    padding-left: 10px;
    padding-right: 10px;
}

table.columns .left-text-pad,
table.columns .text-pad-left,
table.column .left-text-pad,
table.column .text-pad-left {
    padding-left: 10px;
}

table.columns .right-text-pad,
table.columns .text-pad-right,
table.column .right-text-pad,
table.column .text-pad-right {
    padding-right: 10px;
}

/* Block Grid */

.block-grid {
    width: 100%;
    max-width: 580px;
}

.block-grid td {
    display: inline-block;
    padding: 10px;
}

.two-up td {
    width: 270px;
}

.three-up td {
    width: 173px;
}

.four-up td {
    width: 125px;
}

.five-up td {
    width: 96px;
}

.six-up td {
    width: 76px;
}

.seven-up td {
    width: 62px;
}

.eight-up td {
    width: 52px;
}

/* Alignment & Visibility Classes */

table.center, td.center {
    text-align: center;
}

h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
    text-align: center;
}

span.center {
    display: block;
    width: 100%;
    text-align: center;
}

img.center {
    margin: 0 auto;
    float: none;
}

.show-for-small,
.hide-for-desktop {
    display: none;
}

/* Typography */

body, table.body, h1, h2, h3, h4, h5, h6, p, td {
    color: #222222;
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
    word-break: normal;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 32px;
}

h4 {
    font-size: 28px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 20px;
}

body, table.body, p, td {
    font-size: 14px;
    line-height: 19px;
}

p.lead, p.lede, p.leed {
    font-size: 18px;
    line-height: 21px;
}

p {
    margin-bottom: 10px;
}

small {
    font-size: 10px;
}

a {
    color: #2ba6cb;
    text-decoration: none;
}

a:hover {
    color: #2795b6!important;
}

a:active {
    color: #2795b6!important;
}

a:visited {
    color: #2ba6cb!important;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #2ba6cb;
}

h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active {
    color: #2ba6cb!important;
}

h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
    color: #2ba6cb!important;
}

/* Panels */

.panel {
    background: #f2f2f2;
    border: 1px solid #d9d9d9;
    padding: 10px!important;
}

.sub-grid table {
    width: 100%;
}

.sub-grid td.sub-columns {
    padding-bottom: 0;
}

/* Buttons */

table.button,
table.tiny-button,
table.small-button,
table.medium-button,
table.large-button {
    width: 100%;
    overflow: hidden;
}

table.button td,
table.tiny-button td,
table.small-button td,
table.medium-button td,
table.large-button td {
    display: block;
    width: auto!important;
    text-align: center;
    background: #2ba6cb;
    border: 1px solid #2284a1;
    color: #ffffff;
    padding: 8px 0;
}

table.tiny-button td {
    padding: 5px 0 4px;
}

table.small-button td {
    padding: 8px 0 7px;
}

table.medium-button td {
    padding: 12px 0 10px;
}

table.large-button td {
    padding: 21px 0 18px;
}

table.button td a,
table.tiny-button td a,
table.small-button td a,
table.medium-button td a,
table.large-button td a {
    font-weight: bold;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-size: 16px;
}

table.tiny-button td a {
    font-size: 12px;
    font-weight: normal;
}

table.small-button td a {
    font-size: 16px;
}

table.medium-button td a {
    font-size: 20px;
}

table.large-button td a {
    font-size: 24px;
}

table.button:hover td,
table.button:visited td,
table.button:active td {
    background: #2795b6!important;
}

table.button:hover td a,
table.button:visited td a,
table.button:active td a {
    color: #fff!important;
}

table.button:hover td,
table.tiny-button:hover td,
table.small-button:hover td,
table.medium-button:hover td,
table.large-button:hover td {
    background: #2795b6!important;
}

table.button:hover td a,
table.button:active td a,
table.button td a:visited,
table.tiny-button:hover td a,
table.tiny-button:active td a,
table.tiny-button td a:visited,
table.small-button:hover td a,
table.small-button:active td a,
table.small-button td a:visited,
table.medium-button:hover td a,
table.medium-button:active td a,
table.medium-button td a:visited,
table.large-button:hover td a,
table.large-button:active td a,
table.large-button td a:visited {
    color: #ffffff!important;
}

table.secondary td {
    background: #e9e9e9;
    border-color: #d0d0d0;
    color: #555;
}

table.secondary td a {
    color: #555;
}

table.secondary:hover td {
    background: #d0d0d0!important;
    color: #555;
}

table.secondary:hover td a,
table.secondary td a:visited,
table.secondary:active td a {
    color: #555!important;
}

table.success td {
    background: #5da423;
    border-color: #457a1a;
}

table.success:hover td {
    background: #457a1a!important;
}

table.alert td {
    background: #c60f13;
    border-color: #970b0e;
}

table.alert:hover td {
    background: #970b0e!important;
}

table.radius td {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

table.round td {
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

/* Outlook First */

body.outlook p {
    display: inline!important;
}

/*  Media Queries */

@media only screen and (max-width: 600px) {

    table[class="body"] img {
        width: auto!important;
        height: auto!important;
    }

    table[class="body"] center {
        min-width: 0!important;
    }

    table[class="body"] .container {
        width: 95%!important;
    }

    table[class="body"] .row {
        width: 100%!important;
        display: block!important;
    }

    table[class="body"] .wrapper {
        display: block!important;
        padding-right: 0!important;
    }

    table[class="body"] .columns,
    table[class="body"] .column {
        table-layout: fixed!important;
        float: none!important;
        width: 100%!important;
        padding-right: 0px!important;
        padding-left: 0px!important;
        display: block!important;
    }

    table[class="body"] .wrapper.first .columns,
    table[class="body"] .wrapper.first .column {
        display: table!important;
    }

    table[class="body"] table.columns td,
    table[class="body"] table.column td {
        width: 100%!important;
    }

    table[class="body"] .columns td.one,
    table[class="body"] .column td.one {
        width: 8.333333%!important;
    }

    table[class="body"] .columns td.two,
    table[class="body"] .column td.two {
        width: 16.666666%!important;
    }

    table[class="body"] .columns td.three,
    table[class="body"] .column td.three {
        width: 25%!important;
    }

    table[class="body"] .columns td.four,
    table[class="body"] .column td.four {
        width: 33.333333%!important;
    }

    table[class="body"] .columns td.five,
    table[class="body"] .column td.five {
        width: 41.666666%!important;
    }

    table[class="body"] .columns td.six,
    table[class="body"] .column td.six {
        width: 50%!important;
    }

    table[class="body"] .columns td.seven,
    table[class="body"] .column td.seven {
        width: 58.333333%!important;
    }

    table[class="body"] .columns td.eight,
    table[class="body"] .column td.eight {
        width: 66.666666%!important;
    }

    table[class="body"] .columns td.nine,
    table[class="body"] .column td.nine {
        width: 75%!important;
    }

    table[class="body"] .columns td.ten,
    table[class="body"] .column td.ten {
        width: 83.333333%!important;
    }

    table[class="body"] .columns td.eleven,
    table[class="body"] .column td.eleven {
        width: 91.666666%!important;
    }

    table[class="body"] .columns td.twelve,
    table[class="body"] .column td.twelve {
        width: 100%!important;
    }

    table[class="body"] td.offset-by-one,
    table[class="body"] td.offset-by-two,
    table[class="body"] td.offset-by-three,
    table[class="body"] td.offset-by-four,
    table[class="body"] td.offset-by-five,
    table[class="body"] td.offset-by-six,
    table[class="body"] td.offset-by-seven,
    table[class="body"] td.offset-by-eight,
    table[class="body"] td.offset-by-nine,
    table[class="body"] td.offset-by-ten,
    table[class="body"] td.offset-by-eleven {
        padding-left: 0!important;
    }

    table[class="body"] table.columns td.expander {
        width: 1px!important;
    }

    table[class="body"] .right-text-pad,
    table[class="body"] .text-pad-right {
        padding-left: 10px!important;
    }

    table[class="body"] .left-text-pad,
    table[class="body"] .text-pad-left {
        padding-right: 10px!important;
    }

    table[class="body"] .hide-for-small,
    table[class="body"] .show-for-desktop {
        display: none!important;
    }

    table[class="body"] .show-for-small,
    table[class="body"] .hide-for-desktop {
        display: inherit!important;
    }
}


</style>
<style type="text/css">

    /* Your custom styles go here */
    body, .body {
        background: #2eaadc!important;
    }

    .container {
        margin-bottom: 20px!important;
    }

    h1, h2, h3, h4, h5, h6, strong {
        font-weight: bold!important;
    }

    h1, h2, h3, h4, h5, h6, p, a, center, .footer {
        font-family: trebuchet ms, Tahoma, Verdana, Arial, Helvetica, sans-serif!important;
    }

    p {
        font-size: 12px!important;
        line-height: 19px!important;
    }

    h1 {
        font-size: 22px!important;
        line-height: 20px!important;
        margin-bottom: 24px!important;
    }

    h2 {
        color: #8b3c8c!important;
        font-size: 14px!important;
    }

    h3 {
        font-size: 18px!important;
        line-height: 18px!important;
        margin-bottom: 5px!important;
    }

    a, a:visited {
        color: #87a104!important;
    }

    a:hover, a:active {
        color: #8b3c8c!important;
    }

    .text-right {
        text-align: right!important;
        display: block!important;
    }

    .container {
        background: #fff!important;
    }

    .text-pad {
        padding: 20px!important;
    }

    .left-text-pad {
        padding-left: 20px!important;
    }

    .right-text-pad {
        padding-right: 20px!important;
    }

    @media only screen and (max-width: 600px) {
        table[class="body"] .right-text-pad, table[class="body"] .right-text-pad {
            padding-left: 20px!important;
        }

        .body {
            margin-top: 10px!important;
        }

        .text-right {
            text-align: left!important;
        }
    }

    .float-img {
        margin-right: 20px!important;
    }

    .divider {
        padding-top: 6px!important;
        border-bottom: 1px dotted #000!important;
        margin-bottom: 10px!important;
    }

    .divider td {
        padding: 0!important;
    }

    .padding-top {
        padding-top: 20px!important;
    }

    .padding-bottom {
        padding-bottom: 10px!important;
    }

    .no-padding-top {
        padding-top: 0!important;
    }

    .no-padding-bottom {
        padding-bottom: 0!important;
    }

    .footer {
        background: transparent!important;
        background-color: transparent!important;
    }

    .footer center, .footer p, .footer td {
        color: #fff!important;
    }

    .footer a, .footer a:visited {
        color: #fff!important;
    }

    .footer a:hover, .footer a:active {
        color: #fff!important;
        text-decoration: underline!important;
    }

    * {
        font-family: trebuchet ms, Tahoma, Verdana, Arial, Helvetica, sans-serif!important;
    }
    .center {
        margin: 0 auto!important;
    }
</style>
</head>
<body class="outlook">
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>

<tr>
<td>
<table class="container" style="margin-top: 20px">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper last no-padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td><img src="http://placehold.it/580x135" alt="Header-Bild"/></td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad right-text-pad">
                                    <h1>Hallo,</h1>
                                    <img src="http://placehold.it/80x80" alt="Introbild"
                                         class="float-img"/>

                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                        sed diam nonummy nibh euismod tincidunt ut laoreet
                                        dolore magna aliquam erat volutpat. Ut wisi enim ad
                                        minim veniam, quis nostrud exerci tation ullamcorper
                                        suscipit lobortis nisl ut aliquip ex ea commodo
                                        consequat. Duis autem vel eum iriure dolor in hendrerit
                                        in dolor sit amet consecetuer
                                        delenit augue duis dolore te feugait nulla
                                        facilisi. </p>

                                    <p>Nam liber tempor cum soluta nobis eleifend option congue
                                        nihil imperdiet doming id quod mazim placerat facer
                                        possim assum. Typi non habent claritatem insitam; est
                                        usus dolor legentis in iis qui facit eorum claritatem.
                                        Investigationes demonstraverunt lectores legere me lius
                                        quod ii legunt saepius. Claritas est etiam processus
                                        dynamicus, qui sequitur mutationem dolor sit amet. </p>

                                    <p>Herzliche Grüße<br/>
                                        <strong>Eure Redaktionsteam</strong></p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table class="container teasers">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper last padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad">
                                    <h2>Top-Thema 1</h2>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="five columns">
                            <tr>
                                <td class="left-text-pad">
                                    <img src="http://placehold.it/210x120" alt="Placeholder"/>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last">
                        <table class="seven columns">
                            <tr>
                                <td class="right-text-pad no-padding-bottom">
                                    <h3>Lorem ipsum dolor sit amet</h3>

                                    <p>Duis autem vel eum iriure dolor in hendrerit in dolor
                                        delenit augue duis dolore te feugait nulla facilisi.
                                        Nam liber tempor cum soluta nobis eleifend option
                                        placerat facer possim assum.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper last no-padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td class="right-text-pad">
                                    <a href="#" class="text-right">&raquo; Weiterlesen</a>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row divider">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad">
                                    <h2>Top-Thema 2</h2>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="five columns">
                            <tr>
                                <td class="left-text-pad">
                                    <img src="http://placehold.it/210x120" alt="Placeholder"/>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last">
                        <table class="seven columns">
                            <tr>
                                <td class="right-text-pad no-padding-bottom">
                                    <h3>Lorem ipsum dolor sit amet</h3>

                                    <p>Duis autem vel eum iriure dolor in hendrerit in dolor
                                        delenit augue duis dolore te feugait nulla facilisi.
                                        Nam liber tempor cum soluta nobis eleifend option
                                        placerat facer possim assum.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper last no-padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td class="right-text-pad">
                                    <a href="#" class="text-right">&raquo; Weiterlesen</a>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row divider">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad">
                                    <h2>Top-Thema 1</h2>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row padding-bottom">
                <tr>
                    <td class="wrapper">
                        <table class="five columns">
                            <tr>
                                <td class="left-text-pad">
                                    <img src="http://placehold.it/210x120" alt="Placeholder"/>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last">
                        <table class="seven columns">
                            <tr>
                                <td class="right-text-pad">
                                    <h3>Lorem ipsum dolor sit amet</h3>

                                    <p>Duis autem vel eum iriure dolor in hendrerit in dolor
                                        delenit augue duis dolore te feugait nulla facilisi.
                                        Nam liber tempor cum soluta nobis eleifend option
                                        placerat facer possim assum.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table class="container footer" bgcolor="2eaadc">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td>
                                    <center><a href="http://www.test.de" title="Test"><strong>www.test.de</strong></a>
                                        | Impressum | Kontakt | Abbestellen
                                    </center>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</td>
</tr>

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

         
            

         

inkOutlook

Hi,

I tried to create a HTML newsletter template as described in the Ink documentation and used the Ink inliner to inline the css code. However, something seems to be wrong with my code. The content is not centered in all Outlook versions and also all my custom styling is missing when opening the mail in Outlook 2007 or higher.

It looks great in other clients! Maybe you could help me and tell me what I'm doing wrong? Thanks!

Edit: The first screenshot shows the template correctly rendered in Apple Mail, the second one is how it looks in Outlook 2007.

Apple mail

Outlook

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">

/**********************************************
* Ink v1.0.5 - Copyright 2013 ZURB Inc        *
**********************************************/

/* Client-specific Styles & Reset */

#outlook a {
    padding: 0;
}

body {
    width: 100%!important;
    min-width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}

.ExternalClass {
    width: 100%;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
    line-height: 100%;
}

#backgroundTable {
    margin: 0;
    padding: 0;
    width: 100%!important;
    line-height: 100%!important;
}

img {
    outline: none;
    text-decoration: none;
    -ms-interpolation-mode: bicubic;
    width: auto;
    max-width: 100%;
    float: left;
    clear: both;
    display: block;
}

center {
    width: 100%;
    min-width: 580px;
}

a img {
    border: none;
}

p {
    margin: 0 0 0 10px;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    border-collapse: collapse!important;
}

table, tr, td {
    padding: 0;
    vertical-align: top;
    text-align: left;
}

hr {
    color: #d9d9d9;
    background-color: #d9d9d9;
    height: 1px;
    border: none;
}

/* Responsive Grid */

table.body {
    height: 100%;
    width: 100%;
}

table.container {
    width: 580px;
    margin: 0 auto;
    text-align: inherit;
}

table.row {
    padding: 0px;
    width: 100%;
    position: relative;
}

table.container table.row {
    display: block;
}

td.wrapper {
    padding: 10px 20px 0px 0px;
    position: relative;
}

table.columns,
table.column {
    margin: 0 auto;
}

table.columns td,
table.column td {
    padding: 0px 0px 10px;
}

table.columns td.sub-columns,
table.column td.sub-columns,
table.columns td.sub-column,
table.column td.sub-column {
    padding-right: 10px;
}

td.sub-column, td.sub-columns {
    min-width: 0px;
}

table.row td.last,
table.container td.last {
    padding-right: 0px;
}

table.one {
    width: 30px;
}

table.two {
    width: 80px;
}

table.three {
    width: 130px;
}

table.four {
    width: 180px;
}

table.five {
    width: 230px;
}

table.six {
    width: 280px;
}

table.seven {
    width: 330px;
}

table.eight {
    width: 380px;
}

table.nine {
    width: 430px;
}

table.ten {
    width: 480px;
}

table.eleven {
    width: 530px;
}

table.twelve {
    width: 580px;
}

table.one center {
    min-width: 30px;
}

table.two center {
    min-width: 80px;
}

table.three center {
    min-width: 130px;
}

table.four center {
    min-width: 180px;
}

table.five center {
    min-width: 230px;
}

table.six center {
    min-width: 280px;
}

table.seven center {
    min-width: 330px;
}

table.eight center {
    min-width: 380px;
}

table.nine center {
    min-width: 430px;
}

table.ten center {
    min-width: 480px;
}

table.eleven center {
    min-width: 530px;
}

table.twelve center {
    min-width: 580px;
}

table.one .panel center {
    min-width: 10px;
}

table.two .panel center {
    min-width: 60px;
}

table.three .panel center {
    min-width: 110px;
}

table.four .panel center {
    min-width: 160px;
}

table.five .panel center {
    min-width: 210px;
}

table.six .panel center {
    min-width: 260px;
}

table.seven .panel center {
    min-width: 310px;
}

table.eight .panel center {
    min-width: 360px;
}

table.nine .panel center {
    min-width: 410px;
}

table.ten .panel center {
    min-width: 460px;
}

table.eleven .panel center {
    min-width: 510px;
}

table.twelve .panel center {
    min-width: 560px;
}

.body .columns td.one,
.body .column td.one {
    width: 8.333333%;
}

.body .columns td.two,
.body .column td.two {
    width: 16.666666%;
}

.body .columns td.three,
.body .column td.three {
    width: 25%;
}

.body .columns td.four,
.body .column td.four {
    width: 33.333333%;
}

.body .columns td.five,
.body .column td.five {
    width: 41.666666%;
}

.body .columns td.six,
.body .column td.six {
    width: 50%;
}

.body .columns td.seven,
.body .column td.seven {
    width: 58.333333%;
}

.body .columns td.eight,
.body .column td.eight {
    width: 66.666666%;
}

.body .columns td.nine,
.body .column td.nine {
    width: 75%;
}

.body .columns td.ten,
.body .column td.ten {
    width: 83.333333%;
}

.body .columns td.eleven,
.body .column td.eleven {
    width: 91.666666%;
}

.body .columns td.twelve,
.body .column td.twelve {
    width: 100%;
}

td.offset-by-one {
    padding-left: 50px;
}

td.offset-by-two {
    padding-left: 100px;
}

td.offset-by-three {
    padding-left: 150px;
}

td.offset-by-four {
    padding-left: 200px;
}

td.offset-by-five {
    padding-left: 250px;
}

td.offset-by-six {
    padding-left: 300px;
}

td.offset-by-seven {
    padding-left: 350px;
}

td.offset-by-eight {
    padding-left: 400px;
}

td.offset-by-nine {
    padding-left: 450px;
}

td.offset-by-ten {
    padding-left: 500px;
}

td.offset-by-eleven {
    padding-left: 550px;
}

td.expander {
    visibility: hidden;
    width: 0px;
    padding: 0!important;
}

table.columns .text-pad,
table.column .text-pad {
    padding-left: 10px;
    padding-right: 10px;
}

table.columns .left-text-pad,
table.columns .text-pad-left,
table.column .left-text-pad,
table.column .text-pad-left {
    padding-left: 10px;
}

table.columns .right-text-pad,
table.columns .text-pad-right,
table.column .right-text-pad,
table.column .text-pad-right {
    padding-right: 10px;
}

/* Block Grid */

.block-grid {
    width: 100%;
    max-width: 580px;
}

.block-grid td {
    display: inline-block;
    padding: 10px;
}

.two-up td {
    width: 270px;
}

.three-up td {
    width: 173px;
}

.four-up td {
    width: 125px;
}

.five-up td {
    width: 96px;
}

.six-up td {
    width: 76px;
}

.seven-up td {
    width: 62px;
}

.eight-up td {
    width: 52px;
}

/* Alignment & Visibility Classes */

table.center, td.center {
    text-align: center;
}

h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
    text-align: center;
}

span.center {
    display: block;
    width: 100%;
    text-align: center;
}

img.center {
    margin: 0 auto;
    float: none;
}

.show-for-small,
.hide-for-desktop {
    display: none;
}

/* Typography */

body, table.body, h1, h2, h3, h4, h5, h6, p, td {
    color: #222222;
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
    word-break: normal;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 32px;
}

h4 {
    font-size: 28px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 20px;
}

body, table.body, p, td {
    font-size: 14px;
    line-height: 19px;
}

p.lead, p.lede, p.leed {
    font-size: 18px;
    line-height: 21px;
}

p {
    margin-bottom: 10px;
}

small {
    font-size: 10px;
}

a {
    color: #2ba6cb;
    text-decoration: none;
}

a:hover {
    color: #2795b6!important;
}

a:active {
    color: #2795b6!important;
}

a:visited {
    color: #2ba6cb!important;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #2ba6cb;
}

h1 a:active,
h2 a:active,
h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active {
    color: #2ba6cb!important;
}

h1 a:visited,
h2 a:visited,
h3 a:visited,
h4 a:visited,
h5 a:visited,
h6 a:visited {
    color: #2ba6cb!important;
}

/* Panels */

.panel {
    background: #f2f2f2;
    border: 1px solid #d9d9d9;
    padding: 10px!important;
}

.sub-grid table {
    width: 100%;
}

.sub-grid td.sub-columns {
    padding-bottom: 0;
}

/* Buttons */

table.button,
table.tiny-button,
table.small-button,
table.medium-button,
table.large-button {
    width: 100%;
    overflow: hidden;
}

table.button td,
table.tiny-button td,
table.small-button td,
table.medium-button td,
table.large-button td {
    display: block;
    width: auto!important;
    text-align: center;
    background: #2ba6cb;
    border: 1px solid #2284a1;
    color: #ffffff;
    padding: 8px 0;
}

table.tiny-button td {
    padding: 5px 0 4px;
}

table.small-button td {
    padding: 8px 0 7px;
}

table.medium-button td {
    padding: 12px 0 10px;
}

table.large-button td {
    padding: 21px 0 18px;
}

table.button td a,
table.tiny-button td a,
table.small-button td a,
table.medium-button td a,
table.large-button td a {
    font-weight: bold;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    color: #ffffff;
    font-size: 16px;
}

table.tiny-button td a {
    font-size: 12px;
    font-weight: normal;
}

table.small-button td a {
    font-size: 16px;
}

table.medium-button td a {
    font-size: 20px;
}

table.large-button td a {
    font-size: 24px;
}

table.button:hover td,
table.button:visited td,
table.button:active td {
    background: #2795b6!important;
}

table.button:hover td a,
table.button:visited td a,
table.button:active td a {
    color: #fff!important;
}

table.button:hover td,
table.tiny-button:hover td,
table.small-button:hover td,
table.medium-button:hover td,
table.large-button:hover td {
    background: #2795b6!important;
}

table.button:hover td a,
table.button:active td a,
table.button td a:visited,
table.tiny-button:hover td a,
table.tiny-button:active td a,
table.tiny-button td a:visited,
table.small-button:hover td a,
table.small-button:active td a,
table.small-button td a:visited,
table.medium-button:hover td a,
table.medium-button:active td a,
table.medium-button td a:visited,
table.large-button:hover td a,
table.large-button:active td a,
table.large-button td a:visited {
    color: #ffffff!important;
}

table.secondary td {
    background: #e9e9e9;
    border-color: #d0d0d0;
    color: #555;
}

table.secondary td a {
    color: #555;
}

table.secondary:hover td {
    background: #d0d0d0!important;
    color: #555;
}

table.secondary:hover td a,
table.secondary td a:visited,
table.secondary:active td a {
    color: #555!important;
}

table.success td {
    background: #5da423;
    border-color: #457a1a;
}

table.success:hover td {
    background: #457a1a!important;
}

table.alert td {
    background: #c60f13;
    border-color: #970b0e;
}

table.alert:hover td {
    background: #970b0e!important;
}

table.radius td {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

table.round td {
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
}

/* Outlook First */

body.outlook p {
    display: inline!important;
}

/*  Media Queries */

@media only screen and (max-width: 600px) {

    table[class="body"] img {
        width: auto!important;
        height: auto!important;
    }

    table[class="body"] center {
        min-width: 0!important;
    }

    table[class="body"] .container {
        width: 95%!important;
    }

    table[class="body"] .row {
        width: 100%!important;
        display: block!important;
    }

    table[class="body"] .wrapper {
        display: block!important;
        padding-right: 0!important;
    }

    table[class="body"] .columns,
    table[class="body"] .column {
        table-layout: fixed!important;
        float: none!important;
        width: 100%!important;
        padding-right: 0px!important;
        padding-left: 0px!important;
        display: block!important;
    }

    table[class="body"] .wrapper.first .columns,
    table[class="body"] .wrapper.first .column {
        display: table!important;
    }

    table[class="body"] table.columns td,
    table[class="body"] table.column td {
        width: 100%!important;
    }

    table[class="body"] .columns td.one,
    table[class="body"] .column td.one {
        width: 8.333333%!important;
    }

    table[class="body"] .columns td.two,
    table[class="body"] .column td.two {
        width: 16.666666%!important;
    }

    table[class="body"] .columns td.three,
    table[class="body"] .column td.three {
        width: 25%!important;
    }

    table[class="body"] .columns td.four,
    table[class="body"] .column td.four {
        width: 33.333333%!important;
    }

    table[class="body"] .columns td.five,
    table[class="body"] .column td.five {
        width: 41.666666%!important;
    }

    table[class="body"] .columns td.six,
    table[class="body"] .column td.six {
        width: 50%!important;
    }

    table[class="body"] .columns td.seven,
    table[class="body"] .column td.seven {
        width: 58.333333%!important;
    }

    table[class="body"] .columns td.eight,
    table[class="body"] .column td.eight {
        width: 66.666666%!important;
    }

    table[class="body"] .columns td.nine,
    table[class="body"] .column td.nine {
        width: 75%!important;
    }

    table[class="body"] .columns td.ten,
    table[class="body"] .column td.ten {
        width: 83.333333%!important;
    }

    table[class="body"] .columns td.eleven,
    table[class="body"] .column td.eleven {
        width: 91.666666%!important;
    }

    table[class="body"] .columns td.twelve,
    table[class="body"] .column td.twelve {
        width: 100%!important;
    }

    table[class="body"] td.offset-by-one,
    table[class="body"] td.offset-by-two,
    table[class="body"] td.offset-by-three,
    table[class="body"] td.offset-by-four,
    table[class="body"] td.offset-by-five,
    table[class="body"] td.offset-by-six,
    table[class="body"] td.offset-by-seven,
    table[class="body"] td.offset-by-eight,
    table[class="body"] td.offset-by-nine,
    table[class="body"] td.offset-by-ten,
    table[class="body"] td.offset-by-eleven {
        padding-left: 0!important;
    }

    table[class="body"] table.columns td.expander {
        width: 1px!important;
    }

    table[class="body"] .right-text-pad,
    table[class="body"] .text-pad-right {
        padding-left: 10px!important;
    }

    table[class="body"] .left-text-pad,
    table[class="body"] .text-pad-left {
        padding-right: 10px!important;
    }

    table[class="body"] .hide-for-small,
    table[class="body"] .show-for-desktop {
        display: none!important;
    }

    table[class="body"] .show-for-small,
    table[class="body"] .hide-for-desktop {
        display: inherit!important;
    }
}


</style>
<style type="text/css">

    /* Your custom styles go here */
    body, .body {
        background: #2eaadc!important;
    }

    .container {
        margin-bottom: 20px!important;
    }

    h1, h2, h3, h4, h5, h6, strong {
        font-weight: bold!important;
    }

    h1, h2, h3, h4, h5, h6, p, a, center, .footer {
        font-family: trebuchet ms, Tahoma, Verdana, Arial, Helvetica, sans-serif!important;
    }

    p {
        font-size: 12px!important;
        line-height: 19px!important;
    }

    h1 {
        font-size: 22px!important;
        line-height: 20px!important;
        margin-bottom: 24px!important;
    }

    h2 {
        color: #8b3c8c!important;
        font-size: 14px!important;
    }

    h3 {
        font-size: 18px!important;
        line-height: 18px!important;
        margin-bottom: 5px!important;
    }

    a, a:visited {
        color: #87a104!important;
    }

    a:hover, a:active {
        color: #8b3c8c!important;
    }

    .text-right {
        text-align: right!important;
        display: block!important;
    }

    .container {
        background: #fff!important;
    }

    .text-pad {
        padding: 20px!important;
    }

    .left-text-pad {
        padding-left: 20px!important;
    }

    .right-text-pad {
        padding-right: 20px!important;
    }

    @media only screen and (max-width: 600px) {
        table[class="body"] .right-text-pad, table[class="body"] .right-text-pad {
            padding-left: 20px!important;
        }

        .body {
            margin-top: 10px!important;
        }

        .text-right {
            text-align: left!important;
        }
    }

    .float-img {
        margin-right: 20px!important;
    }

    .divider {
        padding-top: 6px!important;
        border-bottom: 1px dotted #000!important;
        margin-bottom: 10px!important;
    }

    .divider td {
        padding: 0!important;
    }

    .padding-top {
        padding-top: 20px!important;
    }

    .padding-bottom {
        padding-bottom: 10px!important;
    }

    .no-padding-top {
        padding-top: 0!important;
    }

    .no-padding-bottom {
        padding-bottom: 0!important;
    }

    .footer {
        background: transparent!important;
        background-color: transparent!important;
    }

    .footer center, .footer p, .footer td {
        color: #fff!important;
    }

    .footer a, .footer a:visited {
        color: #fff!important;
    }

    .footer a:hover, .footer a:active {
        color: #fff!important;
        text-decoration: underline!important;
    }

    * {
        font-family: trebuchet ms, Tahoma, Verdana, Arial, Helvetica, sans-serif!important;
    }
    .center {
        margin: 0 auto!important;
    }
</style>
</head>
<body class="outlook">
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>

<tr>
<td>
<table class="container" style="margin-top: 20px">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper last no-padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td><img src="http://placehold.it/580x135" alt="Header-Bild"/></td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad right-text-pad">
                                    <h1>Hallo,</h1>
                                    <img src="http://placehold.it/80x80" alt="Introbild"
                                         class="float-img"/>

                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                        sed diam nonummy nibh euismod tincidunt ut laoreet
                                        dolore magna aliquam erat volutpat. Ut wisi enim ad
                                        minim veniam, quis nostrud exerci tation ullamcorper
                                        suscipit lobortis nisl ut aliquip ex ea commodo
                                        consequat. Duis autem vel eum iriure dolor in hendrerit
                                        in dolor sit amet consecetuer
                                        delenit augue duis dolore te feugait nulla
                                        facilisi. </p>

                                    <p>Nam liber tempor cum soluta nobis eleifend option congue
                                        nihil imperdiet doming id quod mazim placerat facer
                                        possim assum. Typi non habent claritatem insitam; est
                                        usus dolor legentis in iis qui facit eorum claritatem.
                                        Investigationes demonstraverunt lectores legere me lius
                                        quod ii legunt saepius. Claritas est etiam processus
                                        dynamicus, qui sequitur mutationem dolor sit amet. </p>

                                    <p>Herzliche Grüße<br/>
                                        <strong>Eure Redaktionsteam</strong></p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table class="container teasers">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper last padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad">
                                    <h2>Top-Thema 1</h2>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="five columns">
                            <tr>
                                <td class="left-text-pad">
                                    <img src="http://placehold.it/210x120" alt="Placeholder"/>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last">
                        <table class="seven columns">
                            <tr>
                                <td class="right-text-pad no-padding-bottom">
                                    <h3>Lorem ipsum dolor sit amet</h3>

                                    <p>Duis autem vel eum iriure dolor in hendrerit in dolor
                                        delenit augue duis dolore te feugait nulla facilisi.
                                        Nam liber tempor cum soluta nobis eleifend option
                                        placerat facer possim assum.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper last no-padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td class="right-text-pad">
                                    <a href="#" class="text-right">&raquo; Weiterlesen</a>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row divider">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad">
                                    <h2>Top-Thema 2</h2>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper">
                        <table class="five columns">
                            <tr>
                                <td class="left-text-pad">
                                    <img src="http://placehold.it/210x120" alt="Placeholder"/>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last">
                        <table class="seven columns">
                            <tr>
                                <td class="right-text-pad no-padding-bottom">
                                    <h3>Lorem ipsum dolor sit amet</h3>

                                    <p>Duis autem vel eum iriure dolor in hendrerit in dolor
                                        delenit augue duis dolore te feugait nulla facilisi.
                                        Nam liber tempor cum soluta nobis eleifend option
                                        placerat facer possim assum.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row">
                <tr>
                    <td class="wrapper last no-padding-top">
                        <table class="twelve columns">
                            <tr>
                                <td class="right-text-pad">
                                    <a href="#" class="text-right">&raquo; Weiterlesen</a>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row divider">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td class="left-text-pad">
                                    <h2>Top-Thema 1</h2>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <table class="row padding-bottom">
                <tr>
                    <td class="wrapper">
                        <table class="five columns">
                            <tr>
                                <td class="left-text-pad">
                                    <img src="http://placehold.it/210x120" alt="Placeholder"/>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                    <td class="wrapper last">
                        <table class="seven columns">
                            <tr>
                                <td class="right-text-pad">
                                    <h3>Lorem ipsum dolor sit amet</h3>

                                    <p>Duis autem vel eum iriure dolor in hendrerit in dolor
                                        delenit augue duis dolore te feugait nulla facilisi.
                                        Nam liber tempor cum soluta nobis eleifend option
                                        placerat facer possim assum.</p>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table class="container footer" bgcolor="2eaadc">
    <tr>
        <td>
            <table class="row">
                <tr>
                    <td class="wrapper last">
                        <table class="twelve columns">
                            <tr>
                                <td>
                                    <center><a href="http://www.test.de" title="Test"><strong>www.test.de</strong></a>
                                        | Impressum | Kontakt | Abbestellen
                                    </center>
                                </td>
                                <td class="expander"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</td>
</tr>

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

         
            

         

Lin Kurzweg gave the most helpful answer for this post
Lin Kurzweg over 5 years ago

OK, the problem was that the Zurb inliner strips out the custom styles in the second tag from the boilerplate.html, so all my custom styles were gone in Outlook...

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

Ryan Burnett over 5 years ago

Can you share screenshots of this: 1) working correctly and 2) from Outlook 2007?

Lin Kurzweg over 5 years ago

Yes, sure!
Added them to the post :)

Lin Kurzweg over 5 years ago

OK, the problem was that the Zurb inliner strips out the custom styles in the second tag from the boilerplate.html, so all my custom styles were gone in Outlook...