CODEWITHSUNDEEP
htmloutlookhtml-email
Ben Yates
Ben Yates

Reputation: 75

Text in span tags breaking HTML in Outlook 2013

I can't seem to stop my HTML newsletter template breaking in Outlook.

It works fine in both Gmail and iOS/Apple apps but outlook is interpreting it differently and forcing elements to break.

The code I am having particular problems with is at the top of the mail and im pretty sure it is this section that is resulting in the break;

<tr>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <img style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="35" alt="&#10004"></td>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <span style="align: left; font-size:11px;">We search the market for you</span></td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <img style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <span style="align: left; font-size:11px;">No hidden costs</span></td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <img style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
        <td colspan="2" style="background-color:#DFDFDF;" bgcolor="#DFDFDF">
            <span style="float: left; font-size:11px;">Fill in one simple form</span></td>
    </tr>

I have tried various changes to the code - using p tags in stead of spans, changing from float: left to align: left. Adding explicit widths etc. But can't seem to figure it out.

Upvotes: 0

Views: 2242

Answers (2)

Bidstrup
Bidstrup

Reputation: 1617

Gortonington answer is correct, another thing, dont use float: left on the last td, infact you dont need the span's just put the style directly on the tds, and use align="left". And add a border="0" on the images, if you want links on them.

<tr>
  <td style="background-color:#DFDFDF;" bgcolor="#DFDFDF"><img border="0" style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="35" alt="&#10004"></td>
  <td align="left" style="background-color:#DFDFDF;font-size:11px;" bgcolor="#DFDFDF"> We search the market for you</td>
</tr>
<tr>
  <td style="background-color:#DFDFDF;" bgcolor="#DFDFDF"><img border="0" style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
  <td align="left" style="background-color:#DFDFDF;font-size:11px;" bgcolor="#DFDFDF"> No hidden costs</td>
</tr>
<tr>
  <td style="background-color:#DFDFDF;" bgcolor="#DFDFDF"><img border="0" style="display:block;" src="http://www.mediablanketmail.com/email/xxxx.jpg" width="38" height="34" alt="&#10004"></td>
  <td align="left" style="background-color:#DFDFDF;font-size:11px;" bgcolor="#DFDFDF"> Fill in one simple form</td>
</tr>

Upvotes: 1

Gortonington
Gortonington

Reputation: 3587

I think the issue is that you have colspan="2" on each TD, but only have 2 columns on each row. So Outlook is creating a new row for each one in order to follow the html attribute.

The other Email client pre-processors are able to parse the code and fix the issue to display it as intended, but Outlook places the priority on meeting the colspan attribute, which causes each TD to in essence get it's own row.

If you were to remove the colspan="2" attribute, I believe it should work correctly. Also, in this case you do not even need the span tag. You can place the font size and align attributes on the TD (which is actually much more stable across clients).

Upvotes: 1

Related Questions