Menu icon Foundation
hacking for outlook

Hi there, i'm trying to build a newsletter for my company.

I'm finding that even with foundation (and claim to work in outlooks!), all outlook layouts still need further hacking on top of the foundation framework (using 2.1). I'm also using the CSS version and hand coding in sublime to learn (not got into all the SASS stuff yet, one thing at a time).

Anyway i'm figuring hacks out to outlook quirks (mostly 07/10/13) using conditional statements for outlook. I'm currently stuck on one issue where my paragraphs are losing the paragraph spacing (margin bottom) when i use an <a> within it.

The point i'm at now is i'm trying to override a margin:0 attribute with a margin: 0 0 10 0 attribute with a css rule just shown to outlook 07/10/13 (if mso), but I can't for the life of me get it to override the inline margin: 0.

Pulling my hair out - hoping someone can help - i'm probably doing something really simple wrong.

Thanks!

Outlook

Hi there, i'm trying to build a newsletter for my company.

I'm finding that even with foundation (and claim to work in outlooks!), all outlook layouts still need further hacking on top of the foundation framework (using 2.1). I'm also using the CSS version and hand coding in sublime to learn (not got into all the SASS stuff yet, one thing at a time).

Anyway i'm figuring hacks out to outlook quirks (mostly 07/10/13) using conditional statements for outlook. I'm currently stuck on one issue where my paragraphs are losing the paragraph spacing (margin bottom) when i use an <a> within it.

The point i'm at now is i'm trying to override a margin:0 attribute with a margin: 0 0 10 0 attribute with a css rule just shown to outlook 07/10/13 (if mso), but I can't for the life of me get it to override the inline margin: 0.

Pulling my hair out - hoping someone can help - i'm probably doing something really simple wrong.

Thanks!

Rafi Benkual over 2 years ago

That's odd, we have newsletters set up this way as well with out this issue. Here are the tests: https://litmus.com/pub/5b3d68b

Have you used any custom CSS to affect the margin on <a> tags or <p> tags? Can you share what that is?

Alternatively you can use the spacer:

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

Stephen Crowther over 2 years ago

I have added some additional css rules to the base foundation (i'm sure everybody has to do this) but nothing that should affect the margins on p and a tags. I tweaked one or two things in the foundation base css, like text sizes, hover states and colours (for clients that support) and i tweaked the mobile width from 95% to 97% to eek a bit more width out on mobile. That's it really??????

It really has me stumped.

Currently only way i can get it to work is by deleting the margin:0 entries AFTER i have inlined. This isn't ideal as my next task is to upload to campaign monitor and make it an editable template. Looking at the way this works, you do need to upload separate HTML and CSS files, otherwise the campaign monitor code snippets, e.g. <unsubscribe> won't parse the right code into the a tags to be styled how I want (or at least thats how i understand it!).

cheers

@media only screen and (max-width: 380px) {
  .reduce-logo-320 {
    max-width: 120px !important;
    padding-top: 15px !important; }
  .reduce-text-320 {
     font-size: 11px !important; } 
}

@media only screen and (max-width: 596px) {
  p.indent {margin-left: 20px !important;
          margin-right: 20px !important; }
          
}


  .header {
    background: #000000;
  }

  .header .columns {
    padding-bottom: 0;
  }

  .header p {
    color: #fff;
    padding-top: 15px;
  }

  .header .wrapper-inner {
    padding: 20px;
  }

  .header .container {
    background: transparent;
  }

  .tab {display: inline-block;
    background-color: #fed900;
    color: #000000;
    font-weight: bold;
    padding: 5px 10px 2px 10px;
    margin: 0px 0px 0px 0px !important;
    Margin: 0px 0px 0px 0px !important;
  }

a img {
    opacity: 1.0;
}

a img:hover {
    opacity: 0.8 !important;
}

Jarryd Fillmore over 2 years ago

Nice!

Stephen Crowther over 2 years ago

This is my litmus test - notice the <a> in the paragraph - difference in outlook 07/10/13 to everything else.

 

Rafi Benkual over 2 years ago

Hmm, the <unsubscribe> tag seems to pass over just fine in our templates. I'm just curous, what version of the framework on you on? 

In your package.json, you'll see the version

Stephen Crowther over 2 years ago

When i started this build 2.1 was the current foundation for email version.

Let me be clear i'm working through this using the manual css method - i'm not using sass or any form of automation at this stage (namely because I don't know how to yet!)

My workflow has been:

  1. Code HTML assign foundation syntax, using the 2.1 css framework
  2. Use the foundation v2 inliner on the website, to inline the code (which doesn't understand CM tags of course)
  3. Test in litmus

At this point, the issue with outlook i wrote above rears its head - means I am currently editing the inlined version of the code to stop it from happening.

When i then upload the inlined code to CM, this means the cm specific tags are not being styled by the css, as the css is targeting <a> tags not <unsubscribe> tags (not valid html).

I'm confident if i upload the non-inlined html, and separate css to CM, it will all work fine, but the outlook issue above is preventing me from doing so, as i'm having to inline prior to cm upload, edit the inline, and upload the inline.

Does this make any more sense?

 

Bear in mind, I am learning here, and I fully understand that it is more likely I have done something wrong than the foundation framework having any issues.