I'm an amateur programmer and i'm working on an email template for a service, that should look professionally on all relevant clients, but the majority of clients use Outlook. That's the root of all my problems currently, because i need to make a lot of compromises using MSO comments to get the content to look even remotely close to good. What i'm facing now is the inability to change padding size of a div in the mso comment. I have played around with all the units and solutions i could think of to make this happen but it does not work for me. I would appreciate any help i can get.
<!doctype html>
<html lang="cs">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>titulek</title>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
line-height: inherit;
max-width: 600px;
margin: 0 auto;
padding: 0;
}
table {
text-align: center;
}
.title {
text-align: left;
background-color: dodgerblue;
color: white;
border-radius: 10px;
padding: 12px;
margin-top: 25px;
margin-bottom: 25px;
}
.main-text {
text-align: left;
width: 90%;
margin-bottom: 25px;
}
.button {
cursor: pointer;
border: 1px solid darkgray;
border-radius: 5px;
padding: 8% 0;
margin: 2%;
min-width: 100px;
white-space: nowrap;
}
hr {
border: 1px solid darkgray;
margin-top: 20px;
margin-bottom: 10px;
}
.automated-warning {
width: 90%;
font-size: small;
text-align: end;
}
</style>
<!--[if mso]>
<style>
.button {
padding: 1.6em 0 !important;
}
</style>
<![endif]-->
</head>
<body>
<table width="100%" border="0">
<thead>
<tr>
<td colspan="4">
<img src="https://apac-production-wp.s3.ap-southeast-2.amazonaws.com/app/uploads/2017/08/19083003/logo-placeholder-1.png" width="200px">
</td>
</tr>
<tr>
<td colspan="4">
<div class="title">
<h1>
<!--[if mso]>
<![endif]-->
Title
</h1>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<!--[if mso]>
</tr>
<table>
<tr>
<td width="5%">
</td>
<![endif]-->
<td colspan="4">
<div class="main-text" style="color: black;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><br> Nam veritatis fugiat doloremque iste ut corporis explicabo libero quae et aliquam quasi natus esse facere rerum voluptatibus, <br>magni voluptate maxime dolorem? <br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nesciunt, tenetur dolore at natus consectetur pariatur, vitae cumque saepe fuga quasi exercitationem incidunt libero velit unde veniam minima! Obcaecati, officiis.
</div>
</td>
<!--[if mso]>
<td width="5%">
</td>
</tr>
</table>
<table>
<![endif]-->
</tr>
<tr>
<!--[if mso]>
<td width="15%">
</td>
<![endif]-->
<td width="40%">
</td>
<td colspan="1" style="min-width: 120px;">
<!--[if mso]>
</td>
<td width="20%" style="mso-line-height-rule:exactly;line-height:1px; mso-text-raise:-5px"">
<![endif]-->
<a href="_blank" style="text-decoration: none;">
<div class="button" style="color: dodgerblue;">
button 1
</div>
</a>
</td>
<td colspan="1" style="min-width: 120px;">
<!--[if mso]>
</td>
<td width="20%" style="mso-shading:dodgerblue;mso-line-height-rule:exactly;line-height:1px; mso-text-raise:-5px"">
<![endif]-->
<a href="_blank" style="text-decoration: none;">
<div class="button" style="color: white; background-color: dodgerblue;">
button 2
</div>
</a>
</td>
<td width="4%">
</td>
<!--[if mso]>
<td width="5%">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="100%"">
<tr>
<![endif]-->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<hr>
<div class="automated-warning">
<!--[if mso]>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="95%" style="text-align: right; font-size: 13px">
<tr>
<td>
<![endif]-->
<i style="color: darkgray;">
automated warning
</i>
</div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
The part i can't get to work:
<!--[if mso]>
<style>
.button {
padding: 1.6em 0 !important;
}
</style>
<![endif]-->
The reason i need this to happen is because this buttin size looks completely fine in web outlook and other relevant clients but old client turns it into ugly rectangles.And then if i use other units like em, again it does not correspond - 0.8em is a good size for web, but the client looks good with 1.6em. Thank you for any suggestions.
I tried using basically any units that exist.
The Outlooks on Windows use Word as a rendering engine. And Word is not very good at rendering HTML and CSS. In particular, in your case, Word only supports specific CSS properties on certain HTML elements. So for example,
paddingis only supported on<td>elements. This means that if you want to apply a<td>, you’re going to need to use a table.So while your conditional comment code is syntaxically correct, it won’t work because Outlook’s engine itself doesn’t support
paddingondivelements. (Another issue here is that nesting adivinside anaelement is not supported either, so your styles will look off in Outlook.)Here’s an example of code for a button that would work for Outlook on Windows:
If you want to use a dedicated framework, MJML is often appreciated by developers (https://mjml.io/).