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.
Instead of trying to override the value of the padding property, which wonť work with in-line CSS, I added the mso-padding-alt property on the .button class. This allows for different padding sizing on the buttons between old outlook client and other clients, as the mso-padding-alt property is only recognized by old outlook.