Automation Email and HTML/CSS Formatting Issues
Asked by John Izquierdo:

Hello,

I'm setting up an automation to send a email notification to a group when an specific issue type is created but I'm having issues with the email formatting with HTML/CSS. Only some of the CSS is actually working and other parts aren't.

Specifically the stylizing for the **div** , **img** , and **hr**tags.

Below is my HTML in the Send Email action.

```
<html>
<head>
<style type="text/css">
.container{
margin: auto;
width: 60%;
padding: 10px;
font-family: Arial;
}
a {
text-decoration: none;
}
img {
height: 35px;
float: right;
}
</style>
</head>

<body>
<div class="container">
<p>{{issue.reporter.displayName}} <strong>created an issue</strong>.</p>

<hr style="border:1px solid red">

<p style="color:grey;">{{project.name}} / <a href="{{issue.url}}" style="color:grey;">{{issue.key}}</a></p>

<h2><a href="{{issue.url}}" style="color: #1963d1;">{{issue.summary}}</a></h2>

<p>
<strong>Description:</strong> {{issue.description}}
<br>
<br>
<strong>Issue Type:</strong> {{issue.issuetype.name}}
<br>
<br>
<strong>Priority:</strong> {{issue.priority.name}}
<br>
<br>
<strong>Created:</strong> {{issue.created.longDateTime}}
<br>
<br>
<strong>Reporter:</strong> {{issue.reporter.displayName}}
</p>

<hr style="border: 1px solid red">

<p style="color:grey;">Powered by Jira <img src="SOME-IMAGE-URL"></p>
</div>
</body>
</html>
```

According to W3Schools Try It page the result should look like the screenshot below.

![screenshot-297.png](/t5/image/serverpage/image-id/314895iE732312BBF44E5E7/image-size/large?v=v2&px=999 "screenshot-297.png")

But the email I receive looks like...

![screenshot-298.png](/t5/image/serverpage/image-id/314896iDC8C33651BD6A30D/image-size/large?v=v2&px=999 "screenshot-298.png")


Answers:
author: John Izquierdo
body: Looks like the issue is how the Outlook desktop app is rendering the HTML/CSS. OWA seems to render it without issues.

I'm investigating some more to find a fix so that it renders correctly everywhere. I'll post my solution if I find one to possible help anyone else out there.

comments: author: Nick Maday
body: [@John Izquierdo](/t5/user/viewprofilepage/user-id/4993587) Your template is awesome!

I tested an email with your code in Classic Outlook and New Outlook desktop apps, as well as OWA. I wasn't able to replicate your exact issue, but I did encounter other rendering issues in Classic Outlook.

In Classic Outlook, all of the CSS styling was stripped and the image was blocked (just the broken image link).

New Outlook and OWA rendered perfectly, though! (Followed in case you find a solution, because most of my org is on Classic, but the logo is just such a nice touch!)

Even though I don't have an answer for you, I wanted to share a couple smart values I tweaked for my instance,

**1. Convert UTC time to local**

```
{{issue.created.convertToTimeZone([timezone]).longDateTime}}
```

Replacing **\[timezone\]** with a valid [TZ Identifier](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) (such as "America/Chicago") converts UTC to your local timezone. Alternatively, you could replace **\[timezone\]** with a nested smart value, such as:

```
{{issue.created.convertToTimeZone(reporter.timeZone]).longDateTime}}
```

which would convert UTC to the reporter's timezone.

**2. Convert Description to HTML**

```
{{issue.description.html}}
```

If the description contains special formatting, this will retain the original formatting when sending the email

**(2.5/)3. Disable "Convert line breaks to HTML line** **breaks"**

At the bottom of the Send email component, select **More Options** and deselect **Convert line breaks to HTML line breaks.**

When descriptions contained more than one paragraph, line breaks were duplicated when using **{{issue.description.html}}**


Tags: automation

cloud

css

html

jira-service-management

jira-service-management-cloud