Menu icon Foundation
Rows and spacers = Outlook Trouble

Yesterday I posted about fixing a spurious line issue in Outlook by changing the non-breaking space type. I believe this now to have been a spoof fix. I have now recreated the problem on the basic.html template and removed all of my css except that required to make the background red (as one of my mails has a black background). 

body, body table.body{
  background-color: red;
  }

 I now think this issue is when there is more than one row in a single wrapper element.

I suspect this has happened quite a bit but it is just not normally visible because the background is usually the same colour

The not-so-special code inserted in basic.html to make this happen at line 43

   <wrapper class="secondary">
        <spacer size="16"></spacer>
        <row>
            <columns small="12">
                <p class="text-center">You have made a great decision to switch your energy account, thank you. This email includes some important information about setting up your
                    account as well as a copy of your Agreement with us.</p>
            </columns>
        </row>

        <spacer size="16"></spacer>

        <row>
            <columns large="6">
                <callout class="secondary">
                    <h5>Your Consumer Number</h5>
                    <p>$ConsumerNumber</p>
                </callout>
            </columns>
            <columns large="6">
                <callout class="secondary">
                    <h5>Your Consumer Number</h5>
                    <p>$ConsumerNumber</p>
                </callout>
            </columns>
        </row>

    </wrapper>

Over a couple of days, I have tried every imaginable permutation of those rows including removing the second one's double columns - reverting to single. After sending several hundred test mails with pretty much every edit and subtle nuance in the generated html having been tried I discovered that it was not the wrapper / row combination but having some sort of character at the end of a row code before the next item. I remember the old IEs being fussy about the exact table layout including returns and spaces and let's face it, Outlook is a very aged IE.

This is really hard to test 100% convincingly because Outlook itself is so flaky about this issue. Even hitting reply presents one with an OK version of the offending mail.

At this point, this tiny modification in componentFactory,js seems to work thus far:

 //Line 26

      return format('<table %s class="%s"><tbody><tr>%s</tr></tbody></table>&zwj;', attrs, classes.join(' '), inner);

&zwj; is a zero width joiner. An &nbsp; with no width.

And the line vanishes...

outlook lineOutlookrow error

Yesterday I posted about fixing a spurious line issue in Outlook by changing the non-breaking space type. I believe this now to have been a spoof fix. I have now recreated the problem on the basic.html template and removed all of my css except that required to make the background red (as one of my mails has a black background). 

body, body table.body{
  background-color: red;
  }

 I now think this issue is when there is more than one row in a single wrapper element.

I suspect this has happened quite a bit but it is just not normally visible because the background is usually the same colour

The not-so-special code inserted in basic.html to make this happen at line 43

   <wrapper class="secondary">
        <spacer size="16"></spacer>
        <row>
            <columns small="12">
                <p class="text-center">You have made a great decision to switch your energy account, thank you. This email includes some important information about setting up your
                    account as well as a copy of your Agreement with us.</p>
            </columns>
        </row>

        <spacer size="16"></spacer>

        <row>
            <columns large="6">
                <callout class="secondary">
                    <h5>Your Consumer Number</h5>
                    <p>$ConsumerNumber</p>
                </callout>
            </columns>
            <columns large="6">
                <callout class="secondary">
                    <h5>Your Consumer Number</h5>
                    <p>$ConsumerNumber</p>
                </callout>
            </columns>
        </row>

    </wrapper>

Over a couple of days, I have tried every imaginable permutation of those rows including removing the second one's double columns - reverting to single. After sending several hundred test mails with pretty much every edit and subtle nuance in the generated html having been tried I discovered that it was not the wrapper / row combination but having some sort of character at the end of a row code before the next item. I remember the old IEs being fussy about the exact table layout including returns and spaces and let's face it, Outlook is a very aged IE.

This is really hard to test 100% convincingly because Outlook itself is so flaky about this issue. Even hitting reply presents one with an OK version of the offending mail.

At this point, this tiny modification in componentFactory,js seems to work thus far:

 //Line 26

      return format('<table %s class="%s"><tbody><tr>%s</tr></tbody></table>&zwj;', attrs, classes.join(' '), inner);

&zwj; is a zero width joiner. An &nbsp; with no width.

And the line vanishes...

Rafi Benkual over 2 years ago

Thanks for the PR! Merged!

https://github.com/zurb/inky/pull/78

Christian Brandt over 2 years ago

hi, 

i have the same problem, but this fix dont work. the lines appear on other position after this fix.

this problem is only in outlook 2016.