Auth0 e-mail template interfering with Outlook

Help
1

Hello!

I started to create custom e-mail templates. And for the start, I took a look at Auth0 templates.

I started to modify the code and soon realised, that in Outlook, there is an error with displaying the messages (there is something, but not in place). In Outlook, while everything is a mess, there is a button with functionality that works well. In Gmail, everything is in right place and works well. Outlook does offer the solution to show the email from the web browser, but I want the email to look right from the start, so customers should not take extra steps in order to show the email correctly.

Here is the picture of how (default Auth0 template) looks in Outlook:

image
image609Ă—731 42.1 KB

And in browser, where information is cached:

image
image612Ă—723 38 KB

What do I need to change in order for it to work properly?

If you have questions for me to explain the situation better, please, ask!

1 Like
3

Hi @KalmerR,

The emails templates are HTML based and should load the similarly on modern clients. Are you using an up-to-date version of Outlook?

Thanks,
Dan

4

Hello @dan.woda,
Sorry for the late reply. Yes, I use the latest version of Outlook. I did some research and found out that Outlook does not like paddings and other HTML and CSS elements.

When email is looked throguh web browser (logged in to Outlook), template is working correctly.

5

@KalmerR,

Glad you figured out what was causing the problem. Were you able work around it with email customization?

Thanks,
Dan

6

@dan.woda

I havent figured it out yet.

image
image605Ă—622 14.1 KB

I marked the problem in yellow. I don’t know why this happens. When I try to select it (it’s clickable also), I can see, that it’s like one section. First section is where information is “Account”. And “second section” is where the yellow line.

To clarify: Outlook in web browsers displays the email template correctly, in program, it does not.

7

I took a look at it, but can’t reproduce as I don’t currently have access to an Office365/Outlook account on my machine.

You said it is clickable- what does it link to?

8

Hey @dan.woda, it is not linking to anywhere, when moving cursor on it, there just appears to be arrow, when clicking, it kind of moves the element around, and somehow, I did make this:

image
image616Ă—633 9.42 KB

(Watch for the yellow marker)

9

Basically what I found out by experimenting is that the template uses “ghost tables”. If anyone comes across with the problem I had, read this:

I guess it’s solved, I don’t see the lines appearing anymore.

10

@KalmerR,

I’m happy you found a solution! Thanks for posting your solution as well, this is what makes an effective community. Best of luck!

Thanks,
Dan

11

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.