Outlook doesn't respect duplicated modules' link styles

[sbrooks]

Developer here.  I created a custom email template.  In order for Outlook-on-Windows (OOW) to respect links styles, I target these links with ID selector in custom stylesheet.  It works great across multiple clients, until a user duplicates a module.  When a user decides they want to drag in a duplicate module of a particular type, the Marketo editor shows the link styling working great (of course), but OOW shows default blue/normal weight/underline link, and doesn't respect our custom link styling.  (If I use a class selector instead of ID selector, OOW doesn't read any of it).  Again, link styles on ancestral modules work great.  It's the duplicated modules posing an issue.  Thoughts here?  Not sure why Marketo isn't extending module-specific custom styles across duplicated modules, and I'm hoping it's something I can fix on my end.

As a side note, I understand adding inline styling to the links will solve the issue, but this isn't an easy task to ask of my users (who are marketers, not developers, and this opens up the door to user error).

[SanfordWhiteman]

Need more detail here. Are you referring to an inline stylesheet like so?

<style>
#test { 
  color: red; 
  font-weight: bold; 
}
</style>

And two links with the same id attribute?

<p><a id="test">Click here</a></p>
<p><a id="test">Or here</a></p>

In Outlook 2016, such a style isn’t applied to either link (let alone both).

[sbrooks]

Hi Sanford,

Thanks for your reply. I ended up solving this by going a slightly different route. Maybe this will help someone else struggling with the same issue.

Originally, I was targeting mktoModule IDs via an inline stylesheet to apply discrete module-specific link styles. Outlook-on-Windows (OOW) read these, and it worked great, until a user duplicated a module... and then those links would be styled with client defaults. In those cases, adding inline styles in the Marketo editor pop-up itself would make the duplicated modules have the correct link styles, but this is time-consuming and not within our workflow.

My new solution is to apply a new ID to the direct parent <td> of the particular div.mktoText that I'm targeting. But instead of just giving the td an ID directly, I made that ID a boolean variable, so user can choose the ID they want (each ID denoting a different set of link styles). Then, in an inline stylesheet, I use those IDs w/ element selectors to apply the link styles I want. This tests well in duplicated modules, in OOW and other clients.

So, as long as I don't apply this ID to the table.mktoModule or the inner div.mktoText elements directly, but rather the direct <td> parent of div.mktoText, it appears I am in the clear.

If you have any additional thoughts to add, I would appreciate hearing them.

Thank you!

[SanfordWhiteman]

You didn’t respond to my point, though. Outlook doesn’t support the CSS id selector for links. So what styles were you using that worked? This is outside the question of modules/duplicate id attributes.

[sbrooks]

Right, but it is my understanding that Marketo renders the styles as inline no? In fact, that seems to be exactly what happens in all of the multi-client tests. I applied styles to color, font-weight, and text-decoration broadly, using element selectors. And then for fine-tuning unique modules, I only applied style to colors, using ID applied to a parent <td>. 

[SanfordWhiteman]

Marketo doesn’t inline styles you put in a <style> tag.

[sbrooks]

Ok, good to know. I am also using classes to target styles in some cases, in addition to straight-up element selectors and IDs in unique cases. Perhaps I'm not explaining this well, but the issue itself did get solved.

[SanfordWhiteman]

OK, but the thing that solved it couldn’t have been related to id attributes in CSS selectors.

Definitely a good idea to look at the rendered (received) source of Marketo emails so you can see how little Marketo changes your original markup. What you’re perceiving as Marketo changing the markup is more likely how the email provider changes the markup before presenting to the email client, i.e. how Google alters the source before it’s rendered within the Gmail UI.

[sbrooks]

For anyone confused while reading this thread one day, there were two diff ideas being discussed here. Sanford was saying that Outlook doesn’t respect putting IDs on anchor elements themselves. I was talking about putting IDs on modules, more specifically on a TD element within a module, and targeting anchor elements’ styles that way (i.e. #theme-style a), which Outlook does absolutely respect in both original and duplicated modules.

[Courtney_Grime1]

Since I use a similar technique to what you describe, I think I may know your core problem.

Whenever you create an editable area in Marketo—whether a module or a specific editable area—the platform requests that you assign an ID to the element.  Marketo (correctly, though frustratingly!) tries to apply a unique ID to the suffix of the element. Therefore, if you have something like

<td class="mktoText" id="putTextHere" mktoName="Put Text Here">
<p>Lorem ipsum</p>
</td>

That putTextHere ID will have a UUID attached to the name in the final render, a la putTextHere076ea618e4-2ac5-47dc-aea0-fb9db3a04d20. To prevent this, you need to set the ID for the element at the parent level, then use the technique.