Preview Notification display fails

[nebula]

I am running into an issue when creating a new notification in the system. I create the notification, click Preview Notification, and only see a partial view of my work. If I remove my "View Incident" icon from the code, then I can click Preview Notification and it will display everything accordingly.

Here's what's in the source code:

<p>​</p>
<table style="height: 13px; width: 100%; border-collapse: separate; border-style: none;" border="0">
<tbody>
<tr style="height: 13px;">
<td style="background-color: #f2a900; height: 13px; width: 98.3871%;">&nbsp;</td>
</tr>
</tbody>
</table>
<p><span style="font-family: verdana, geneva; font-size: 8pt;">Dear ${caller_id.first_name},</span></p>
<p><span style="font-family: verdana, geneva; font-size: 8pt;">Incident ${number} has been opened on your behalf. Please see the summary below:</span></p>
<p style="margin-left: 10%; margin-right: 10%;">&nbsp;</p>
<p style="margin-left: 10%; margin-right: 10%;"><span style="font-family: verdana, geneva; font-size: 8pt;"><strong>Incident Number:</strong> ${number}</span></p>
<p style="margin-left: 10%; margin-right: 10%;"><span style="font-family: verdana, geneva; font-size: 8pt;"><strong>Short Description:</strong> ${short_description}</span></p>
<p style="margin-left: 10%; margin-right: 10%;">&nbsp;</p>
<p><span style="font-family: verdana, geneva; font-size: 8pt;">To add more information or to follow the status of your Incident, please click here:</span></p>
<p>&nbsp;</p>
<style>
div {
margin: auto;
width: 175px;
height: 20px;
padding: 15px;
background-color: #f2a900;
box-shadow: 10px 10px 5px lightgray;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white
}
</style>
<div><center>View Incident</center></div>

[RaghavSh · Accepted solution]

Try removing the <center></center> tag and check.

The preview fails when there is some error in HTML part. And also take that div above the style element. If it still does not work, applying inline css to the div tag is also worth checking.

[nebula]

Thank you! You were correct to suggest applying inline css to the div tag. That did the trick and generated the view!

<p style="margin:auto;width:175px;height:20px;padding:15px;background-color:#f2a900;box-shadow:10px 10px 5px lightgray;font-family:sans-serif;font-weight:bold;color:white;text-align:center;">View Incident</p>