0

I am building HMTL emails and I use nested tables to layout the email. To change text I apply the styles directly to the < td > tags and this works for the most part across the board. I am noticing though on SOME heavily nested tabled (Greater then 5) the style is being removed completely on Gmail in Internet Explorer, and on Yahoo in various browsers (on a PC). Below is my code:

(This code is ~5 tables deep)

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
          </tr>
        </table>

Has anyone ran into this before or know why they might be stripping the style? It's not only text styles but the padding is also removed on these < td > tags.

DigitalMC
  • 805
  • 2
  • 16
  • 31

5 Answers5

2

I've never had the issue myself, but there is known to be issues with nesting tables too deep. I'm willing to bet that there is a more precise way to layout your email to avoid the issue. Don't be scared to use colspans and rowspans when necessary. Post your code if you like.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • Gotcha thanks. I've been comfortable with colspans but I was under the impression rowspans were shady business. I'll tinker around. Thanks a bunch. Also I can't post my code because I'm building this for a client and I can't expose it at this point. – DigitalMC Dec 06 '13 at 15:49
  • 1
    Rowspans always worked fine for me. Only issues I've seen are with the Outlook page break, but that is a universal issue. – John Dec 06 '13 at 16:16
  • 1
    For reference, here is [an example](http://stackoverflow.com/questions/19859603/html-email-gaps-between-images-in-outlook-2013/19861060#19861060) of optimizing an email with colspans – John Dec 06 '13 at 16:22
1

I think I may know why this is happening. I've seen issues when using a font-family with quotes throw off the inline CSS. If you move the font-family to the end of your inline styles it may work. See below.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
      </tr>
    </table>
Darryl Vos
  • 329
  • 1
  • 6
  • I've heard of this causing Outlook to default to Times New Roman - So you've found it to affect other clients also, on a scope outside of the font declaration? More info would be great... – John Dec 09 '13 at 14:04
  • This is very helpful. Thank for taking the time to explain. – DigitalMC Dec 13 '13 at 16:00
1

In case this is useful for anyone: I ran into this problem with a specific <td> that was getting all the inline CSS stripped. After checking it, I found I had an incorrect property declared, like so:

padding-bottom;

Removing that incorrect property resolved the issue.

It seems to me that Gmail somehow validates the css of each element, and strips it all if it finds an error.

Rorok_89
  • 365
  • 1
  • 9
0

Not a direct answer so my apologise, but could you not use CSS instead of HTML tables? You will be able to achieve the same result I would think?

Andrew Tanner
  • 423
  • 5
  • 15
0

I just tested an html email that works for Gmail. Generally speaking, I learned that Gmail tends to strip out the whole inline style attribute when you declare font-family, this behavior sometimes happens when:

1) when you declare a custom font using ' or ", es: <span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>

2) if don't put spaces between ; , , and : chars, in a font-family declaration.

3) every time you declare 2 <span> with a font-family in the same <td>, Gmail will strip the second's <span> rules

but I don't know what is the general rule, so my solution was: always declare font-family inside a separate tag, at least, in this way you won't lose all the styles.

example:

<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
    <span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>
pastorello
  • 982
  • 10
  • 23
  • Thanks @pastorello, but your code rendered the same in my tests. Interesting approach though. – DigitalMC Jun 29 '16 at 19:32
  • gmail is quite strange about these behaviors, in my specific case I had this structure: ``, the 2 `span` tags had the same inline style (generated by an inliner tool, 100% accuracy). Gmail decided to keep all styles on the first `` and removed all inline style from the second ``. Now i'm editin' my answer for completeness – pastorello Jun 30 '16 at 13:48