Twitter Twitter RSS AboutMe
  • Home
  • About
  • Find Me Everywhere Else
Twitter Twitter RSS AboutMe
 
Skip to content
  • Home
  • About
  • Find Me Everywhere Else

Tag Archives: coding quick tips

No comments

Coding Quick Tips: AOL Mail and the Mystery of the Missing Padding

  By David • March 9, 2016 HTML Email

I ranted about the problems with HTML email last week, so here’s a great and bizarre funkiness that I just experienced, and the solution which will hopefully help someone.

Our story begins on a dark and stormy night bright and sunny day, when I was building an email for a client.  During Litmus tests, they had noticed a strange lack of padding around a certain content area…

aolissue

Left: Gmail. Right: AOL. (Client identity obscured)

…but only within AOL.

First thought: Who still uses AOL?  Answer: about 1% of people, as of 2014.  It’s amazingly still in the top ten, apparently.

Next question: Why?

I mean “why is it breaking?” (though why are people still using AOL is a good question, too).  Litmus has a cool new feature called “Builder,” which provides HTML email devs the opportunity to finally do what Dev Tools has allowed web developers to do for years: live tweaking in-engine.  So I loaded the HTML up, popped up the AOL renderer…and it wasn’t there.

The email looked fine.  Perfect, even.  Padding was right on.

So I chalked it up to some sort of hiccup in Litmus or in our server and ran a new test.  Right as I was about to send the update to the client, I looked at the AOL result.

No padding again.

So I loaded up the code:

...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
  <tr>
   <td align="left" valign="top" style="padding: 25px 20px 30px;"
   class="mob" style="">

    (...insert stuff here...)

   </td>
  </tr>
 </tbody>
</table>
...

Took me about a half-hour of agonizing before I figured it out. I’d been troubleshooting an error in a different part of the email, and to make things quick, I’d added a new “style” tag.

And apparently AOL, rather than adding all the CSS up before rendering it like everyone else does, just applies the last CSS received by the layout engine. Litmus’ Builder must do some CSS preprocessing before sending it to the AOL rendering engine, so I didn’t see it there.

So I removed the extra, empty ‘ style=”” ‘ and re-ran the test. Good as new.

Thanks, AOL, for contributing to my stress levels.

Tagged   coding quick tips, html email
  • RSS Reel World Theology

    • WandaVision: Grief on the Small Screen (RWT Podcast S8E5 + Bonus Episode!) March 18, 2022 admin
    • Free Guy: Liberty to the NPCs (RWT Podcast S8E4) February 26, 2022 admin
    • Encanto: Mirabel’s Miracle (RWT Podcast S8E3) February 13, 2022 admin
    • 2021 In Review (RWT Podcast S8E2) January 29, 2022 admin
  • RSS Redeeming Culture

    • The Unavoidable Allure of Alternate Universes: Right Place, Right Time August 28, 2021
    • The Unavoidable Allure of Alternate Universes: Women in the Room August 19, 2021
    • Editorial: My Part in The Rise and Fall of Mars Hill August 12, 2021
    • How to Ruin a Movie in 45 Minutes August 4, 2021
  • Archives

    • August 2020
    • June 2020
    • May 2020
    • June 2017
    • May 2017
    • January 2017
    • November 2016
    • October 2016
    • August 2016
    • July 2016
    • April 2016
    • March 2016
    • February 2016
  • Categories

    • Current Events
    • HTML Email
    • Nintendo
    • PCA
    • Politics
    • Redeeming Culture Meta
    • Science
    • Sermons
    • Site News
    • Technology
    • Theology
    • TV
    • Writing Prompt Responses
  • Home
  • About
  • Find Me Everywhere Else
The personal blog of David Atwell, the Redeeming Culture guy, coder, and overall geek.
Powered by Paяabola & WordPress.
Twitter Twitter RSS AboutMe